AngularJS（一）——从零开始AngularJS

来源：互联网发布：mac口红外盒辨别真假编辑：程序博客网时间：2024/06/15 10:32

虽然已经使用了不短的时间，但对于 AngularJS 的了解还很浅，也没有系统的学习过，下面慢慢来，系统的梳理一遍 AngularJS ，顺带学习点之前几乎没有自己写过的 filterdirective service 等等。废话少说，第一篇就来看看如何开始使用AngularJS 。

简单来说，只需两步，就能用上高端大气上档次的基于 MVC 的 AngularJS ：

1.index.html：

<!doctypehtml><html lang="zh-cmn-Hans"><head>  <base href="../">  <!-- 这里我们省略了各种<meta>标签 -->  <title>Learn AngularJS</title></head><body ng-app="LearnModule" ng-cloak>  <div ng-controller="FirstController">    <!-- 通过{{}}形式取$scope.person.name并渲染 -->    <p>My Name Is {{person.name}}.</p>  </div>  <div ng-controller="SecondController">    <p>There Is {{money}} Money.</p>  </div>   <script src="angular-1.3.15/angular.js"></script>  <script src="index.js"></script></body></html>

2.index.js：

//声明modulevar app =angular.module("LearnModule", []);//声明第一个controllerapp.controller("FirstController", [ //指定需要注入的模块  "$scope",  function($scope) {   $scope.person = {};   $scope.person.name = "Lucy";  }]);//声明第二个controllerapp.controller("SecondController", [  "$scope",  "$filter",  function($scope, $filter) {    $scope.money = $filter("currency")(12.5);  }]);

注意以下三点：

1.在一个 html 页面中只允许存在一个module ，可以在一个 module 下声明多个controller ，通过在 html 中使用 ng-controller指令来指定使用哪个 controller 。

2.在声明 controller 时用到了AngularJS 的依赖注入特性，通过 [] 中的字符串形式显式声明我们依赖哪些模块，并在 [] 中最后的 function 中传入，当然，function($scope,$filter) 中的参数名都是可以自定义的，但原则上与注入名称相同。

3. $scope 对象在 AngularJS 中充当数据模型（M），但与传统的数据模型不一样， $scope 并不负责处理和操作数据，它只是视图（V）和 html（V）之间的桥梁和纽带。

完。

参考资料：

《AngularJS 权威教程》作者：Ari Lerner 译者：赵望野徐飞何鹏飞

本文出自 “细桶假狗屎” 博客，请务必保留此出处http://xitongjiagoushi.blog.51cto.com/9975742/1659247

0 0