Angular入门（二）快速入门

来源：互联网发布：linux zip打包 TXT文件编辑：程序博客网时间：2024/06/07 17:38

想要快点上手Angular的项目，就读了《精通AngularJS》，就第一章快速入门做个笔记。

<!DOCTYPE html>  <html>  <head>  <meta charset="utf-8">  <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>  </head>  <body>    <div ng-app ng-init="name='world'">      <p>名字 : <input type="text" ng-model="name"></p>      <h1>Hello {{name}}</h1>  </div>    </body>  </html>

1）引入angular.js库

2）使用ng-app的html属性引导

1. 重要特征：

使用自定义的html标签与属性，为静态html文档添加动态行为
使用双花括号作为输出模型值的表达式的分隔符{{expression}}

2. 双向数据绑定（同vue）：任何用户引发的视图改变都会映射到模型上，继而任何模型的改变，也会立刻传播到整个模版。

<body ng-app ng-init="name='world'">    say hello to:<input type="text" ng-model="name">    <h1>hello, {{name}}!</h1></div>

3. MVC模式

1）将ng-init改为ng-controller和函数HelloCtrl

<div ng-controller="HelloCtrl">    say hello to:<input type="text" ng-model="name"><br>    <h1>hello, {{name}}!</h1></div>

函数接收神秘参数$scope

var HelloCtrl = function($scope){    $scope.name='world';}

1）scope作用域

$scope对象是模版的域模型，通过为其属性赋值，可以传递数据给模版渲染

scope也可以封装函数如$scope.getName=function(){...}, 在html中调用{{getName()}}

作用域层级：ng-controller指令会调用scope对象的$new方法创建新的作用域。$rootScope是其他所有作用域的父作用域，在新应用启动时自动创建。
作用域层级和继承：只要子作用域没有与父作用域同名属性，作用域定义的属性对所有子作用域是可见的，只要子作用域没有定义同名的属性。与javascript继承遵循同样的原则。
作用域层级与事件系统：允许跨越作用域层级，传播带有信息的命名事件，然后向上奋发或向下传播。每个作用域实例都有$on方法，用于注册作用域事件的处理器。调用处理器函数时，被分发的event对象会做为第一个参数传入，后续参数则会依据事件负载的信息和事件类型而定。
```
$scope.$on('$locationChangeSuccess', function(event, beware, oldUrl){    //在这里对地址的变化作出反应    //根据新的Url更新面包屑导航});
```
向上分发事件：$includeContentRequested, $includeContentLoaded, $viewContentLoaded, 向下广播：$locationChangeStart, $locationChangeSuccess, $routeUpdate, $routeChangeStart, $routeChangeSuccess, $routeChangeError, $destroy

2）控制器（controller）：初始化作用域实例。不需要特别扩展angualrJs底层类或构造模型对象。

提供模型的初始值
增加UI相关的行为（函数）以及扩展$scope对象

3）模型（model）：普通的js对象。不需要特别扩展angualrJs底层类或构造模型对象。模型可拥有的属性也不仅限于原始值，任何有效的javascript对象或数组都可以，只需要将模型简单的指派给$scope。

4. 模块与依赖注入

1）模块：angular为自己定一了全局命名空间angular，它提供多种功能及不少便利函数，module是其中之一。module作为控制器、服务等的容器

定义新的模块：

angular.module('hello', [])//第一个参数是名字，第二个参数表明需要依赖哪些模块    .controller('HelloCtrl', function($scope){//控制器名字、控制器的构造函数    $scope.name = 'world';});

返回新创建模块的实例，然后开始定义新的控制器，调用controller

模块定义好后，告知angularjs它的存在，只要为ng-app属性赋值即可

<body ng-app="hello">

2）协作对象

依赖注入：控制器声明需要$scope对象，所以AngularJS会创建并注入它。

angularjs拥有内建的依赖注入引擎，

理解对象对其协作对象的需求
找到所需的写作对象
连接协作对象，以形成功能完备的应用

阅读全文

0 0