码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS(一)——从零开始AngularJS

时间:2015-06-06 23:42:09      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:javascript   angularjs   

虽然已经使用了不短的时间 ,但对于 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

//声明module
var app =angular.module("LearnModule", []);
//声明第一个controller
app.controller("FirstController", [ //指定需要注入的模块
  "$scope",
  function($scope) {
   $scope.person = {};
   $scope.person.name = "Lucy";
  }
]);
//声明第二个controller
app.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)和 htmlV 之间的桥梁和纽带。

完。


   参考资料:

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

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

AngularJS(一)——从零开始AngularJS

标签:javascript   angularjs   

原文地址:http://xitongjiagoushi.blog.51cto.com/9975742/1659247

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!