澳门威利斯人_威利斯人娱乐「手机版」

来自 办公软件 2019-08-10 10:26 的文章
当前位置: 澳门威利斯人 > 办公软件 > 正文

angular的一个豆瓣电影app,Bootstrap详细介绍及实例

app.component.html

最终体现的功用为

JavaScript 代码剖析

angular ng-bootstrap

威尼斯娱乐 1

AngularJS 指令 描述
<html ng-app 为 <html> 元素定义一个应用(未命名)
<body ng-controller 为 <body> 元素定义一个控制器
<tr ng-repeat 循环 users 对象数组,每个 user 对象放在 <tr> 元素中。
<button ng-click 当点击 <button> 元素时调用函数 editUser()
<h3 ng-show 如果 edit = true 显示 <h3> 元素
<h3 ng-hide 如果 edit = true 隐藏 <h3> 元素
<input ng-model 为应用程序绑定 <input> 元素
<button ng-disabled 如果发生错误或者 ncomplete = true 禁用 <button> 元素

在 Angular 项目安插

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

参照文章

npm install bootstrap angular angular-route --save

Bootstrap

添加 bootstrap.min.css 样式

新建一个index.html页面 引用 那多个依赖库

威尼斯娱乐 2

Bootstrap 4 components, powered by Angular

npm初阶化项目

angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim', lName:"Pim" },
{id:3, fName:'Sal', lName:"Smith" },
{id:4, fName:'Jack', lName:"Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false; 

$scope.editUser = function(id) {
 if (id == 'new') {
 $scope.edit = true;
 $scope.incomplete = true;
 $scope.fName = '';
 $scope.lName = '';
 } else {
 $scope.edit = false;
 $scope.fName = $scope.users[id-1].fName;
 $scope.lName = $scope.users[id-1].lName; 
 }
};

$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName', function() {$scope.test();});
$scope.$watch('lName', function() {$scope.test();});

$scope.test = function() {
 if ($scope.passw1 !== $scope.passw2) {
 $scope.error = true;
 } else {
 $scope.error = false;
 }
 $scope.incomplete = false;
 if ($scope.edit && (!$scope.fName.length ||
 !$scope.lName.length ||
 !$scope.passw1.length || !$scope.passw2.length)) {
  $scope.incomplete = true;
 }
};

});

测试

 威尼斯娱乐 3

威尼斯娱乐,AngularJS 的首选样式表是 推特(Twitter) Bootstrap, 推特 Bootstrap 是时下最受迎接的前端框架。

<div>
  test the ng-bootstrap
 <div [(ngModel)]="model" ngbRadioGroup name="radioBasic">
  <label class="btn btn-primary">
   <input type="radio" [value]="1"> Left (pre-checked)
  </label>
  <label class="btn btn-primary">
   <input type="radio" value="middle"> Middle
  </label>
  <label class="btn btn-primary">
   <input type="radio" [value]="false"> Right
  </label>
 </div>
 <hr>
 <pre>{{model}}</pre>
</div>

以上正是本文的全部内容,希望对我们的就学抱有协理,也可望我们多多匡助脚本之家。

Bootstrap 类解析

npm install @ng-bootstrap/ng-bootstrap --save
(function(angular){
  'use strict';
  var module = angular.module('movie.coming_soon',['ngRoute']);
  module.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/coming_soon',{
      controller: 'comingSoonController',
      templateUrl: '/coming_soon/view.html'
    });
  }]);
  module.controller('comingSoonController',['$scope',function($scope){

  }]);
})(angular);
元素 Bootstrap 类 定义
<div> container 内容容器
<table> table 表格
<table> table-striped 带条纹背景的表格
<button> btn 按钮
<button> btn-success 成功按钮
<span> glyphicon 字形图标
<span> glyphicon-pencil 铅笔图标
<span> glyphicon-user 用户图标
<span> glyphicon-save 保存图标
<form> form-horizontal 水平表格
<div> form-group 表单组
<label> control-label 控制器标签
<label> col-sm-2 跨越 2 列
<div> col-sm-10 跨越 10 列
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

 imports: [
  /**
   * ngx-bootstrap
   */
  NgbModule.forRoot()
 ],
<h1 class="page-header">{{data.title}}</h1>
<div class="list-group">
  <a href="{{item.alt}}" rel="external nofollow" rel="external nofollow" class="list-group-item" ng-repeat="item in data.subjects">
    {{item.rating.average}}
    <div class="media">
      <div class="media-left">
        <img class="media-object" ng-src="{{item.images.small}}" alt="威尼斯娱乐 4">
      </div>
      <div class="media-body">
        <h3 class="media-heading">{{item.title}}</h3>
        <p>类型:{{item.genres.join('、')}}</p>
        <p>导演:{{d.name  ($last?'':'、')}}</p>       
      </div>
    </div>
  </a>
</div>

AngularJS Bootstrap

如上就是本文的全体内容,希望对大家的上学抱有协助,也可望咱们多多援救脚本之家。

<h1 class="page-header">即将上映</h1>

myUsers.js

示范代码

最后浏览index.html

运作结果:

加上代码:

JavaScript 代码

NG Bootstrap - Angular directives specific to Bootstrap 4

3、配置angular路由

Scope 属性 用途
$scope.fName 模型变量 (用户名)
$scope.lName 模型变量 (用户姓)
$scope.passw1 模型变量 (用户密码 1)
$scope.passw2 模型变量 (用户密码 2)
$scope.users 模型变量 (用户的数组)
$scope.edit 当用户点击创建用户时设置为true。
$scope.error 如果 passw1 不等于 passw2 设置为 true
$scope.incomplete 如果每个字段都为空(length = 0)设置为 true
$scope.editUser 设置模型变量
$scope.watch 监控模型变量
$scope.test 验证模型变量的错误和完整性

在 assets 文件夹下 bootstrap/bootstrap.min.css , 并在 style.css 文件中增多

你也许感兴趣的稿子:

  • Angular.js与Bootstrap相结合贯彻表格分页代码
  • angularJS与bootstrap结合贯彻动态加载弹出提醒内容
  • BootStrap Angularjs NgDialog达成格局对话框
  • Angular2中Bootstrap界面库ng-bootstrap详解
  • 自定义Angular指令与jQuery达成的Bootstrap风格数据双向绑定的单选与多选下拉框
  • 动用Angularjs和bootstrap完结购物车功能
  • Bootstrap和Angularjs合营自制弹框的实例代码
  • AngularJs中Bootstrap3 datetimepicker使用实例
  • AngularJS 与Bootstrap落成表格分页实例代码
  • AngularJS Bootstrap详细介绍及实例代码

HTML 代码

ngx-translate core

 <script src="/js/app.js"></script>

你恐怕感兴趣的篇章:

  • AngularJS HTML编写翻译器介绍
  • AngularJS 实行流程详细介绍
  • 关于angularJs指令的Scope(作用域)介绍
  • AngularJS中的包涵详细介绍及达成示例
  • 3个能够革新用户体验的AngularJS指令介绍
  • AngularJS基础学习笔记之简介
  • AngularJS 模型详细介绍及实例代码
  • AngularJS中的Promise详细介绍及实例代码
  • Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
  • AngularJs天天读书之全体介绍
@import "assets/bootstrap/bootstrap.min.css";
npm init -y   //按默认配置初始化项目

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

威尼斯娱乐 5

然后还亟需援引那贰个css文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://www.hfpgjx.com/uploads/allimg/190810/102602K37-4.jpg"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

<h3>Users</h3>

<table class="table table-striped">
 <thead>
 <tr>
  <th>编辑</th>
  <th>名</th>
  <th>姓</th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="user in users">
  <td>
  <button class="btn" ng-click="editUser(user.id)">
   编辑
  </button>
  </td>
  <td>{{ user.fName }}</td>
  <td>{{ user.lName }}</td>
 </tr>
 </tbody>
</table>

<hr>
<button class="btn btn-success" ng-click="editUser('new')">
创建新用户
</button>
<hr>

<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>

<form class="form-horizontal">
 <div class="form-group">
 <label class="col-sm-2 control-label">名:</label>
 <div class="col-sm-10">
 <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
 </div>
 </div> 
 <div class="form-group">
 <label class="col-sm-2 control-label">姓:</label>
 <div class="col-sm-10">
 <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">密码:</label>
 <div class="col-sm-10">
 <input type="password" ng-model="passw1" placeholder="密码">
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">重复密码:</label>
 <div class="col-sm-10">
 <input type="password" ng-model="passw2" placeholder="重复密码">
 </div>
 </div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
修改
</button>

</div>

<script src="myUsers.js"></script>

</body>
</html>

添加

对应的view.html 修改成

查看 Bootstrap教程。

测验结果

到那边后,项目标中坚构造与体制搭建达成

比方站点在境内,提议利用百度静态财富库的Bootstrap,代码如下:

npm 安装 ng-bootstrap 模块

威尼斯娱乐 6 

以上正是对AngularJS Bootstrap 资料的重新整建,后续继续补充,希望能援救编制程序AngularJS的同桌。

app.module.ts

末尾在index.html页面 body标签加上指令

你可以在你的 AngularJS 应用中投入 Twitter Bootstrap,你能够在您的 <head>成分中增添如下代码:

本文由澳门威利斯人发布于办公软件,转载请注明出处:angular的一个豆瓣电影app,Bootstrap详细介绍及实例

关键词: 澳门威利斯人