Open zdddrszj opened 8 years ago
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。 AngularJS 通过 ng-directives 扩展了 HTML。 ng-app 指令定义一个 AngularJS 应用程序。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。
AngularJS
JavaScript
<script>
HTML
指令
表达式
ng-directives
ng-app
ng-model
ng-bind
来,小试牛刀,运行一下下面的代码,看看结果如何:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div> </body> </html>
:smiley: 是不是发现神奇的地方啦,对了,这就是 Angularjs 的首要特点(数据绑定)~
当网页加载完毕,AngularJS 自动开启。 ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的 “ 所有者 ”。 ng-model 指令把输入域的值绑定到应用程序变量 name。 ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
<div>
name
innerHTML
注意:如果移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。
AngularJS 表达式写在双大括号内: <div>{{ expression }}<div> 或者 <div class="{{ expression }}"></div>。 AngularJS 表达式把数据绑定到 HTML:<div ng-bind=" expression "></div>。 AngularJS 将在表达式书写的位置 " 输出 " 数据。 AngularJS 表达式也可以包含文字、运算符和变量。
<div>{{ expression }}<div>
<div class="{{ expression }}"></div>
<div ng-bind=" expression "></div>
示例:
<div> <p>数字: {{ 5 + 5 }}</p> <p ng-init="i=‘hello’;j='world'">字符串: {{ i + " " + j }}</p> <p ng-init="person={firstName:'John',lastName:'Doe'}">对象: {{ person.lastName }}</p> <p ng-init="arr=[1,2,3,4,5]">数组: {{ arr[2] }}</p> </div>
ng-app 指令定义了 AngularJS 应用程序的 根元素。 ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
ng-init 指令为 AngularJS 应用程序定义了 初始值。 通常情况下,不使用 ng-init。可以使用一个控制器或模块来代替它。
ng-model 指令绑定 HTML 元素到应用程序数据。 ng-model 指令也可以: 为应用程序数据提供类型验证(number、email、required); 为应用程序数据提供状态(invalid、dirty、touched、error); 为 HTML 元素提供 CSS 类; 绑定 HTML 元素到 HTML 表单。
ng-repeat 指令对于集合中(数组中)的每个项会克隆一次 HTML 元素。
除了 AngularJS 内置的指令外,我们还可以创建自定义指令。 你可以使用 .directive 函数来添加自定义的指令。 要调用自定义指令,HTML 元素上需要添加自定义指令名。
.directive
html 代码
<hello></hello> <world value='WORLD'>HELLO</world>
javascript 代码
<script> var app = angular.module("myApp", []); app.directive("hello", function() { return { restrict: 'AE', template : "<h1>你好</h1>" }; }).directive("world",function(){ return { scope: {}, //局部作用域,类似javascript作用域 restrict: 'AE', transclude:true, //指令内部显示位置 template:'<div><div ng-transclude></div> {{w}}</div>', link:function(scope,element,attrs){ scope.w = attrs.value; } } }); </script>
ng-model 指令用于绑定应用程序数据到 HTML 控制器 (input, select, textarea) 的值。
<div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> </div>
<script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); </script>
Scope (作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。
<div ng-app="myApp" ng-controller="myCtrl"> <ul> <li ng-repeat="x in names">{{x}} </ul> </div>
<script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Tom", "Shirly", "Lily"]; }); </script>
这里只有一个作用域 scope,所以处理起来比较简单,但在大型项目中, HTML DOM 中有多个作用域,这时就需要知道自己所使用的 scope 对应的作用域是哪一个。
scope
所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。 $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。
$rootScope
<div ng-app="myApp" ng-controller="myCtrl"> <h1>{{lastname}} 家族成员:</h1> <ul> <li ng-repeat="x in names">{{x}} {{lastname}} </ul> </div>
<script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $rootScope) { $scope.names = ["Tom", "Shirly", "Lily"]; $rootScope.lastname = "Wang"; }); </script>
AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。 控制器是 JavaScript 对象,由标准的 JavaScript 对象 的构造函数创建。
ng-controller
JavaScript 对象
<div ng-app="myApp" ng-controller="personCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{fullName()}} </div>
<script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.firstName = "Shirly"; $scope.lastName = "Wang"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } }); </script>
过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器可用于转换数据,常用过滤器如下:
<div ng-app="myApp" ng-controller="personCtrl"> <p>姓名为 {{ lastName | uppercase }}</p> </div>
其它过滤器类似,大家可自行实验。
AngularJS 有自己的 HTML 事件指令。 ng-click 指令定义了 AngularJS 点击事件。
ng-click
<div ng-app="" ng-init="count=0"> <button ng-click="count = count + 1">点我!</button> <p>{{ count }}</p> </div>
ng-show 指令可用于设置应用中的一部分是否可见 。 ng-show="false" 可以设置 HTML 元素 不可见。 ng-show="true" 可以以设置 HTML 元素可见。
ng-show
ng-show="false"
ng-show="true"
<div ng-app="myApp" ng-controller="personCtrl"> <button ng-click="toggle()">隐藏/显示</button> <p ng-show="myVar"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </p> </div>
<script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.firstName = "Shirly", $scope.lastName = "Wang" $scope.myVar = true; $scope.toggle = function() { $scope.myVar = !$scope.myVar; } }); </script>
ng-hide 指令和 ng-show 正好相反。
ng-hide
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。
$http
<div ng-app="myApp" ng-controller="booklistCtrl"> <ul> <li ng-repeat="book in booklist"> {{ book.name + ', ' + book.price }} </li> </ul> </div>
<script src="js/angular-1.3.0.min.js"></script> <script> var app = angular.module("myApp", []); app.controller('booklistCtrl',function($scope,$http){ $scope.booklist = ""; $http({ method:'GET', url:'data.json' }).success(function(data){ $scope.booklist = data; }).error(function(data){ console.log(data); }); }); </script>
查看demo
AngularJS 路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样。后台路由,通过不同的 URL 会路由到不同的控制器上 (controller),再渲染 (render) 到页面 (HTML) 。AngularJS 的前端路由,需要提前对指定的 (ng-app) ,定义路由规则 (routeProvider) ,然后通过不同的 URL ,告诉 (ng-app) 加载哪个页面 (HTML) ,再渲染到 (ng-app) 视图 (ng-view) 中。
AngularJS 的前端路由,虽然 URL 输入不一样,页面展示不一样,其实完成的单页 (ng-app) 视图 (ng-view) 的局部刷新。这样来看,AngularJS 做单页应用就有点标配的感觉了。
<body ng-app="myApp" ng-view> </body>
<script src="js/angular-1.3.0.min.js"></script> <script src="js/angular-route-1.3.0.min.js"></script> <script> var app = angular.module("myApp", ['ngRoute']); app.config(function($routeProvider){ $routeProvider.when('/hello',{ templateUrl:'tpl/hello.html', controller:'helloCtrl' }).when('/booklist',{ templateUrl:'tpl/booklist.html', controller:'booklistCtrl' }).otherwise({ redirectTo:'/hello' }); }); app.controller('booklistCtrl',function($scope,$http){ $scope.booklist = ""; $http({ method:'GET', url:'data.json' }).success(function(data){ $scope.booklist = data; }).error(function(data){ console.log(data); }); }).controller('helloCtrl',function($scope){ $scope.hello = 'hello'; }); </script>
访问 hello 页面地址:.../demoroute.html#/hello
.../demoroute.html#/hello
访问 booklist 页面地址:.../demoroute.html#/booklist
.../demoroute.html#/booklist
:heart::heart::heart: 好了,今天就到这里吧~
一、Angularjs 简介
AngularJS
是一个JavaScript
框架。它可通过<script>
标签添加到HTML
页面。AngularJS
通过指令
扩展了HTML
,且通过表达式
绑定数据到HTML
。AngularJS
通过ng-directives
扩展了HTML
。ng-app
指令定义一个AngularJS
应用程序。ng-model
指令把元素值(比如输入域的值)绑定到应用程序。ng-bind
指令把应用程序数据绑定到HTML
视图。来,小试牛刀,运行一下下面的代码,看看结果如何:
:smiley: 是不是发现神奇的地方啦,对了,这就是 Angularjs 的首要特点(数据绑定)~
当网页加载完毕,
AngularJS
自动开启。ng-app
指令告诉AngularJS
,<div>
元素是AngularJS
应用程序 的 “ 所有者 ”。ng-model
指令把输入域的值绑定到应用程序变量name
。ng-bind
指令把应用程序变量name
绑定到某个段落的innerHTML
。注意:如果移除了
ng-app
指令,HTML
将直接把表达式显示出来,不会去计算表达式的结果。二、AngularJS 表达式
AngularJS 表达式写在双大括号内:
<div>{{ expression }}<div>
或者<div class="{{ expression }}"></div>
。 AngularJS 表达式把数据绑定到 HTML:<div ng-bind=" expression "></div>
。 AngularJS 将在表达式书写的位置 " 输出 " 数据。 AngularJS 表达式也可以包含文字、运算符和变量。示例:
三、AngularJS 指令
ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的 根元素。 ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了 初始值。 通常情况下,不使用 ng-init。可以使用一个控制器或模块来代替它。
ng-model 指令
ng-model 指令绑定 HTML 元素到应用程序数据。 ng-model 指令也可以: 为应用程序数据提供类型验证(number、email、required); 为应用程序数据提供状态(invalid、dirty、touched、error); 为 HTML 元素提供 CSS 类; 绑定 HTML 元素到 HTML 表单。
ng-repeat 指令
ng-repeat 指令对于集合中(数组中)的每个项会克隆一次 HTML 元素。
创建自定义的指令
除了 AngularJS 内置的指令外,我们还可以创建自定义指令。 你可以使用
.directive
函数来添加自定义的指令。 要调用自定义指令,HTML 元素上需要添加自定义指令名。示例:
html 代码
javascript 代码
四、AngularJS 模型
ng-model 指令用于绑定应用程序数据到 HTML 控制器 (input, select, textarea) 的值。
示例:
html 代码
javascript 代码
五、AngularJS 作用域
Scope (作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。
示例:
html 代码
javascript 代码
这里只有一个作用域
scope
,所以处理起来比较简单,但在大型项目中, HTML DOM 中有多个作用域,这时就需要知道自己所使用的scope
对应的作用域是哪一个。所有的应用都有一个
$rootScope
,它可以作用在 ng-app 指令包含的所有 HTML 元素中。$rootScope
可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。示例:
html 代码
javascript 代码
六、AngularJS 控制器
AngularJS 应用程序被控制器控制。
ng-controller
指令定义了应用程序控制器。 控制器是JavaScript 对象
,由标准的JavaScript 对象
的构造函数创建。示例:
html 代码
七、AngularJS 过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器可用于转换数据,常用过滤器如下:
示例:
其它过滤器类似,大家可自行实验。
八、AngularJS 事件
AngularJS 有自己的 HTML 事件指令。
ng-click
指令定义了 AngularJS 点击事件。示例:
ng-show
指令可用于设置应用中的一部分是否可见 。ng-show="false"
可以设置 HTML 元素 不可见。ng-show="true"
可以以设置 HTML 元素可见。示例:
html 代码
javascript 代码
ng-hide
指令和ng-show
正好相反。九、AngularJS 服务
$http
是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。示例:
html 代码
javascript 代码
查看demo
十、AngularJS 路由
AngularJS 路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样。后台路由,通过不同的 URL 会路由到不同的控制器上 (controller),再渲染 (render) 到页面 (HTML) 。AngularJS 的前端路由,需要提前对指定的 (ng-app) ,定义路由规则 (routeProvider) ,然后通过不同的 URL ,告诉 (ng-app) 加载哪个页面 (HTML) ,再渲染到 (ng-app) 视图 (ng-view) 中。
AngularJS 的前端路由,虽然 URL 输入不一样,页面展示不一样,其实完成的单页 (ng-app) 视图 (ng-view) 的局部刷新。这样来看,AngularJS 做单页应用就有点标配的感觉了。
示例:
html 代码
javascript 代码
访问 hello 页面地址:
.../demoroute.html#/hello
查看demo
访问 booklist 页面地址:
.../demoroute.html#/booklist
查看demo
:heart::heart::heart: 好了,今天就到这里吧~
Thanks