前端框架 AngularJS 入门 1.1 AngularJS简介 AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。 1.2 AngularJS四大特征 1.2.1 MVC模式 Angular 遵循软件工程的 MVC 模式,并鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular 为客户端的 Web 应用带来了传统服务端的服务, 例如独立于视图的控制。 因此,后端减少了许多负担,产生了更轻的 Web 应用。 Model:数据,其实就是 angular 变量($scope.XX); View: 数据的呈现,Html+Directive(指令); Controller:操作数据,就是 function,数据的增删改查; 1.1.1 双向绑定 AngularJS 是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统 HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此, AngularJS 使得对 DOM 的操作不再重要并提升了可测试性。 1.1.1 依赖注入 依赖注入(Dependency Injection,简称 DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建,只需要“吼一嗓子”,则此对象在创建时,其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的 service 和 provider 两类对象,都可以根据形参名称实现 DI. 1.1.1 模块化设计 高内聚低耦合法则 1)官方提供的模块 ng、ngRoute、ngAnimate 2)用户自定义的模块 angular.module('模块名',[ ]) 1.3 入门小 Demo 1.3.1 表达式 [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | < html > < head > < title > 入门小 Demo -1 < / title > < script src = "angular.min.js" > < / script > < / head > < body ng - app > { { 100 + 100 } } < / body > < / html > | 执行结果如下:
表达式的写法是{{表达式 }} 表达式可以是变量或是运算式 ng-app 指令 作用是告诉子元素一下的指令是归 angularJs 的,angularJs 会识别的 ng-app 指令定义了 AngularJS 应用程序的 根元素。 ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。 1.3.1 双向绑定 [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | < html > < head > < title > 入门小 Demo -1 双向绑定 < / title > < script src = "angular.min.js" > < / script > < / head > < body ng - app > 请输入你的姓名: < input ng - model = "myname" > < br > { { myname } } , 你好 < / body > < / html > | 运行效果如下: ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量。 1.3.1 初始化指令 我们如果希望有些变量具有初始值,可以使用 ng-init 指令来对变量初始化 [AppleScript] 纯文本查看 复制代码 ?
[AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 | < head > < title > 入门小 Demo -3 初始化 < / title > < script src = "angular.min.js" > < / script > < / head > < body ng - app ng - init = "myname='陈大海'" > 请输入你的姓名: < input ng - model = "myname" > < br > { { myname } } , 你好 < / body > < / html > | 1.3.1 控制器 [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 | < html > < head > < title > 入门小 Demo -3 初始化 < / title > < script src = "angular.min.js" > < / script > < script > var app = angular.module ( 'myApp' , [] ) ; / / 定义了一个叫 myApp 的模块 / / 定义控制器app.controller ( 'myController' , function ( $scope ) { $scope. add = function ( ) { return parseInt ( $scope.x ) + parseInt ( $scope.y ) ; } | [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | } ) ; < / script > < / head > < body ng - app = "myApp" ng - controller = "myController" > x : < input ng - model = "x" > y : < input ng - model = "y" > 运算结果: { { add ( ) } } < / body > < / html > | 运行结果如下: ng-controller 用于指定所使用的控制器。理 解 $scope: $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图. 1.3.1 事件指令 [AppleScript] 纯文本查看 复制代码 ?
1 2 3 4 5 6 7 | < html > < head > < title > 入门小 Demo -5 事件指令 < / title > < script src = "angular.min.js" > < / script > | [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | < script > var app = angular.module ( 'myApp' , [] ) ; / / 定义了一个叫 myApp 的模块 / / 定义控制器app.controller ( 'myController' , function ( $scope ) { $scope. add = function ( ) { $scope.z = parseInt ( $scope.x ) + parseInt ( $scope.y ) ; } } ) ; < / script > < / head > < body ng - app = "myApp" ng - controller = "myController" > x : < input ng - model = "x" > y : < input ng - model = "y" > < button ng - click = "add()" > 运算 < / button > 结果: { { z } } < / body > < / html > | 运行结果: ng-click 是最常用的单击事件指令,再点击时触发控制器的某个方法 1.3.1 循环数组 [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | < html > < head > < title > 入门小 Demo -6 循环数据 < / title > < script src = "angular.min.js" > < / script > < script > var app = angular.module ( 'myApp' , [] ) ; / / 定义了一个叫 myApp 的模块 / / 定义控制器app.controller ( 'myController' , function ( $scope ) { $scope. list = [ 100 , 192 , 203 , 434 ]; / / 定义数组 } ) ; < / script > < / head > < body ng - app = "myApp" ng - controller = "myController" > < table > < tr ng - repeat = "x in list" > < td > { { x } } < / td > < / tr > < / table > < / body > < / html > | 这里的 ng-repeat 指令用于循环数组变量。 运行结果如下: 1.3.1 循环对象数组 [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | < html > < head > < title > 入门小 Demo -7 循环对象数组 < / title > < script src = "angular.min.js" > < / script > < script > var app = angular.module ( 'myApp' , [] ) ; / / 定义了一个叫 myApp 的模块 / / 定义控制器app.controller ( 'myController' , function ( $scope ) { $scope. list = [ { name : '张三' , shuxue : 100 , yuwen : 93 } , { name : '李四' , shuxue : 88 , yuwen : 87 } , { name : '王五' , shuxue : 77 , yuwen : 56 } ]; / / 定义数组 } ) ; < / script > < / head > < body ng - app = "myApp" ng - controller = "myController" > | [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | < table > < tr > < td > 姓名 < / td > < td > 数学 < / td > < td > 语文 < / td > < / tr > < tr ng - repeat = "entity in list" > < td > { { entity. name } } < / td > < td > { { entity.shuxue } } < / td > < td > { { entity.yuwen } } < / td > < / tr > < / table > < / body > < / html > | 运行结果如下: 1.3.1 内置服务 我们的数据一般都是从后端获取的,那么如何获取数据呢?我们一般使用内置服务$http 来实现。注意:以下代码需要在 tomcat 中运行。 [AppleScript] 纯文本查看 复制代码 ?
[AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | < head > < title > 入门小 Demo -8 内置服务 < / title > < meta charset = "utf-8" / > < script src = "angular.min.js" > < / script > < script > var app = angular.module ( 'myApp' , [] ) ; / / 定义了一个叫 myApp 的模块 / / 定义控制器app.controller ( 'myController' , function ( $scope , $http ) { $scope.findAll = function ( ) { $http. get ( ' data .json' ) .success ( function ( response ) { $scope. list = response; } ) ; } } ) ; < / script > < / head > < body ng - app = "myApp" ng - controller = "myController" ng - init = "findAll()" > < table > < tr > < td > 姓名 < / td > < td > 数学 < / td > | [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | < td > 语文 < / td > [ / size][ / font ][ / align][ font = 微软雅黑][size = 3 ] < / tr > < tr ng - repeat = "entity in list" > < td > { { entity. name } } < / td > < td > { { entity.shuxue } } < / td > < td > { { entity.yuwen } } < / td > < / tr > < / table > < / body > < / html > | 建立文件 data.json [AppleScript] 纯文本查看 复制代码 ?
01 02 03 04 05 06 07 08 09 10 11 | [[ / size][ / font ] { "name" : "张三" , "shuxue" : 100 , "yuwen" : 93 } , { "name" : "李四" , "shuxue" : 88 , "yuwen" : 87 } , { "name" : "王五" , "shuxue" : 77 , "yuwen" : 56 } , { "name" : "赵六" , "shuxue" : 67 , "yuwen" : 86 } ] |
|