AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧

页面引导实例化


1.自动实例化

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<body ng-app="app">1+2={{1+2}}</body>
<script>angular.module('app',[])</script>
</html>

如果不写app这个值那么script的内容可以不写

2.手动实例化(主要通过js来引导)

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<body>1+2={{1+2}}</body>
<script>
    angular.module('app',[])
      .conifg(function(){})
      .run(function(){alert('start');});
    angular.bootstrap(document, ['app']);
</script>
</html>
  • 为什么声明一个模块后面有一个中括号?
  • 因为angular是模块开发,声明一个模块必须要依赖另一个模块或者空模块,否则就声明失效啦
  • config的方法可以配置模块,run是在模块执行前所执行的方法

模块的依赖调用


angular.module('route',[]);
angular.module('app',['route']);

就是这么简单直接route模块的东西都可以被app模块所调用声明一个模块必须要依赖另一个模块或者空模块

模块的控制器($scope这个参数即为控制器的上下文)


1.调用模块的controller方法即可声明一个控制器而且返回当前模块所以可以用级联,

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<body ng-controller="a">{{data}}</body>
<script>
  angular.module('app.controller',[])
    .controller('a',['$scope',function($scope){
        $scope.data=1;
    }]);
  angular.module('app',['app.controller']);
  angular.bootstrap(document, ['app']);
</script>
</html>
  • 为什么声明一个$scope这个变量?
  • 因为当进行压缩js代码的时候变量名称改变,为了第一个参数为$scope这个变量而设计的,
  • 所以可以写成
angular.module('app.controller',[])
  .controller('a',['$scope',function(c){  
    c.data=1;
  }]);
  • 如果不压缩也可以写成
angular.module('app.controller',[])
  .controller('a',function($scope){  
    $scope.data=1;
  });

2.直接声明一个全局方法

function a(a){c.data=1;}
a.$inject = ['$scope'];
angular.module('app',[]);
angular.bootstrap(document, ['app']);

controller$inject对象也是同上原因声明第一个参数为$scope,如果不压缩可以忽略

数据绑定


数据绑定是用了2个大括号,并且获取controller中的数据,如果使用指令则{{}}可以省略直接写属性


Ⅰ.AngularJS的点点滴滴--引导的更多相关文章

  1. Ⅱ.AngularJS的点点滴滴--缓存

    模板缓存-$templateCache and 缓存工厂 $cacheFactory 1.使用script标签 <html ng-app> <script src="htt ...

  2. Ⅶ.AngularJS的点点滴滴-- 事件

    事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...

  3. Ⅵ.AngularJS的点点滴滴-- 指令

    指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...

  4. Ⅴ.AngularJS的点点滴滴-- 资源和过滤

    资源ngResource(依赖ngResource模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ ...

  5. Ⅳ.AngularJS的点点滴滴-- 服务

    服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...

  6. Ⅲ.AngularJS的点点滴滴-- 路由

    路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...

  7. angularjs 笔记(1) -- 引导

    首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"> ...

  8. AngularJS的启动引导过程

    原文:http://www.angularjs.cn/A137?utm_source=ourjs.com 目录: 引导之前 自动引导启动框架 手工引导启动框架 引导第1步:创建注入器 引导第2步:创建 ...

  9. AngularJS1

    Ⅰ.AngularJS的点点滴滴--引导   AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧 ###页面引导实例化 * * * ...

随机推荐

  1. 今天把登陆注册给改成tab了

    真是解决了一个心头大患,本来以为必须请外包公司的工程师才做,自己研究了下也给解决了. 多亏去年做原型时学习了smarty.css.html这些最基本的网站前端开发的技术.FTP上传下载.linux的基 ...

  2. 【BZOJ 3473】 字符串 (后缀数组+RMQ+二分 | 广义SAM)

    3473: 字符串 Description 给定n个字符串,询问每个字符串有多少子串(不包括空串)是所有n个字符串中至少k个字符串的子串? Input 第一行两个整数n,k. 接下来n行每行一个字符串 ...

  3. Android用户界面 UI组件--TextView及其子类(三) EditView以及各种Span文字样式讲解

    EditView和TextView的用法差不多,只是文字可编辑 小技巧: 设置EditText隐藏键盘  setInputType(0); 设置EditText不被输入法遮盖  getWindow() ...

  4. Automatic Code Generation-->Implement Interface

    https://msdn.microsoft.com/en-us/library/hk90416s(v=vs.110).aspx VS中自带的只能提示,一个类继承自某一个接口. 由VS为类生成接口所要 ...

  5. Android 全屏显示-隐藏Navigation Bar

    Sumsung Galaxy Nexus 屏幕分辨率为 1280X 720,但通常的应用都会显示Navigation Bar(Back 键,Home 键等),如下图所示: 但我注意到Youtube应用 ...

  6. IIS出现Server Error in '/' Application.CS0016的解决办法

    这两天一直在弄IIS的事,全都是报错,网上找了好多资料,也尝试了很多,终于在几分钟之前把困扰了我一周的麻烦给解决了,现整理出来,希望对大家有用,闲话少说,直接上图了 Server Error in ' ...

  7. 向Git证明自己的身份,Git别名配置

    一.向Git证明自己的身份 在安装完Git后,第一步就是向Git说明自己的身份,通过如下两个命令证明: git config --global user.name "myusername&q ...

  8. linux 以root用户登录ftp

    ftp默认禁止以root用户登录. 可以修改 /etc/ftpusers 文件,把root注释掉,即可以root用户登录ftp

  9. glsl-UBO

    UBO 是什么?为何要用UBO? 1.数据共享设计 采用Block的原因是: 如果你的程序中包含了多个着色器,而且这些着色器使用了相同的Uniform变量,你就不得不为每个着色器分别管理这些变量.Un ...

  10. AIX项目总结_oracle_sqlloader_01

    近来一直在忙AIX的移行项目,但也因自己小小偷懒,所以到现在才开始记录.接下来,言归正传. 这个项目中,学习中了shell相关知识,从基本的语法命令(定义变量.特殊变量使用.循环控制.方法调用等)到l ...