使用 angularjs
首先在页面的<html>里添加一个模块写法：
<html lang="en"ng-app="myApp">


myApp是模块的名字;

接下来就可以写html标签了：




<div ng-controller="myctr1">

    <p>{{name}}</p>

</div>




myctr1 是控制器的名字 p标签里的写法就是访问 js 代码中控制器里的变量

页面控制器可以嵌套控制器，当子控制器访问的属性没有时，就会向上寻找父控制器里有没有，直到根控制器


$scope  当前作用域
$rootScope  根作用域
首先要创建一个模块：




var app = angular.module('myApp',[]);




创建当前范围$scope -写法：




app.controller(myctr1',function($scope){

   $scope.name = '大厨的笔记';

 });




创建根范围$rootScope -写法：




app.controller('myctr1',function($rootScope){

   $rootScope.age = '24';

 });




根范围可以和当前范围写到一个控制器里-写法：




app.controller('myctr1',function($scope,$rootScope){

   $scope.name = '大厨的笔记';

   $rootScope.age = '24';

 });




当前范围$scope:
在当前作用域定义的属性只有当前作用域可以访问到，其他的作用域里是访问不到的，就像局部变量一样。

根范围$rootScope:
根作用域定义的属性所有的作用域都可以访问到，就像全局变量一样。

优先级：
如果访问的属性在当前范围内没有找到就会使用根范围内定义的属性，如果找到了就不会使用根范围内的属性，就像 js 中的原型链一样。

使用当前范围$scope 定义的属性只能在当前控制器里访问。
使用根范围$rootScope 定义的属性在对应的模块里的任何控制器里都可以访问到


表达式-写法:




<p>{{1-1}}</p>




输出 0   可以写判断运算符同样输出 true / false

接下来是整个 HTML 代码：




<!doctype html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>angularJs</title>

    <style>

        *{padding:0;margin:0;}

        body{padding-bottom:100px;}

    </style>

    <script src="angular/angular-1.2.19.min.js"></script>

</head>

<body>

<input type="text" ng-model="user"/>

<p>{{user}}</p>

<h1>表达式</h1>

<p>{{'hello'+" "+'world'}}</p>

<p>{{123}}</p>

<div ng-init="arr=['a','b','c','d']">

    <h2>数组</h2>

    <p>{{arr[0]}}</p>

    <p>{{arr[1]}}</p>

    <p>{{arr[2]}}</p>

    <p>{{arr[3]}}</p>

</div>

<div ng-init="arr1={name:'123'}">

    <h2>对象</h2>

    <p>{{arr1.name}}</p>

</div>

<div>

    <h2>运算符</h2>

    <p>{{1+1}}</p>

    <p>{{1-3}}</p>

    <p>{{2*4}}</p>

    <p>{{3/6}}</p>

</div>

<div>

    <h2>比较运算符</h2>

    <p>{{3>1}}</p>

</div>

<div>

    <h2>控制器</h2>

    <div ng-controller="myctrl">

        <p>用户名：{{username}}</p>

    </div>

    <div ng-controller="myctr2">

        <p>{{text}}</p>

        <button ng-click="play(33)">点击</button>

    </div>

</div>

<div ng-controller="myctr3">

    <p>{{userInfo.name}}</p>

    <button ng-click = "userInfo.fn(33333333333)">点击</button>

</div>

<script>

   angular.module('myApp',[])

           .controller('myctrl',function($scope){

               $scope.username = 'chenzhanghui';

           })

           .controller('myctr2',function($scope){

               $scope.text = '我是第二个控制器';

               $scope.play = function(e){

                   alert(e);

               }

           })

           .controller('myctr3',function($scope){

               $scope.userInfo = {

                   name:'大厨的笔记',

                    fn:function(){

                        alert(arguments[0]);

                    }

               }

           })

</script>

</body>

</html>




 
												


											
AngularJs基础（一）的更多相关文章
	

    
						
  1. AngularJS基础入门初探
		
    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
    
		
    2. 
						
  2. AngularJS基础知识1
		
    一.angularJS简介 1.什么是 AngularJS? AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.AngularJS是协助搭建单页面工程 ...
    
		
    3. 
						
  3. AngularJS基础概念
		
    作用域.控制器.指令 作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方. 作用域是应用状态的基础.基于动 ...
    
		
    4. 
						
  4. AngularJs基础总结(1.4版本)
		
    注明:现在用的是最新的1系列1.4版本. 一.细节方面入手: 1,ng-app根节点,一般别写在html上面,最多也就写在body就行了,因为我们难免会忘记这个写在哪里,然后复制一些案例代码却总报错. ...
    
		
    5. 
						
  5. Angularjs基础教程
		
    Angularjs-基础教程 一些angualr的基础概念,适合入门. 1.下载 推荐 bower 或 npm 安装. bower install angular bower install angu ...
    
		
    6. 
						
  6. AngularJS基础总结
		
    w3shools    angularjs教程  wiki   <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...
    
		
    7. 
						
  7. Angularjs基础（学习整理）
		
    AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序. ng-model 指令把元素值(比如输入域的值)绑定到应用程序.  ...
    
		
    8. 
						
  8. 3天学习完AngularJS基础内容小结
		
    简介:AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. 一.AngularJS大致功能模块 二.页面交互变得简单 1.示例:计算价格 <htm ...
    
		
    9. 
						
  9. 一步一步弄懂angularJS基础
		
    问题1:ng-app指令的使用以及自定义指令 <!doctype html> <!--这里的ng-app的属性值就是模块的名称,也就是 angular.module("My ...
    
		
    10. 
						
  10. AngularJS基础知识2
		
    一.angularJS双向数据绑定 利用双向数据绑定,不仅能把数据模型的变化同步到视图上面,还可以利用双向数据绑定的特性来做一些样式上面的控制. 双向数据绑定用处很多,不仅仅是像知识点1中的那个例子, ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Spring控制反转与依赖注入(IOC、DI)
			
    IOC: 反转控制   Inverse Of Control DI:依赖注入 Dependency Injection 目的:完成程序的解耦合 解释:在应用系统的开发过程中,有spring负责对象的创 ...
    
			
    2. 
						
  2. Qt 安装一个Service
			
    QString command = "sc create YourServiceName binPath= \""+application_path+"\&qu ...
    
			
    3. 
						
  3. ios手势
			
    iOS 手势操作:拖动.捏合.旋转.点按.长按.轻扫.自定义 大 中 小   1.UIGestureRecognizer 介绍 手势识别在 iOS 中非常重要,他极大地提高了移动设备的使用便捷性. i ...
    
			
    4. 
						
  4. MongoDB配置文件YAML-based选项全解
			
    配置文件部分 MongoDB引入一个YAML-based格式的配置文件.2.4版本以前的仍然兼容. 我的mongodb配置文件: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14  ...
    
			
    5. 
						
  5. 如何用Endnote导入你要用的格式
			
    在Google搜索某一个期刊名 ens格式的文件,下载,然后放入endnote的文件夹中(C:\Program Files (x86)\EndNote X7\Styles) 然后将其导入即可
    
			
    6. 
						
  6. ！对c++类的理解
			
    c++的类可以分为两类,一种是entity的类(i.e.,实体类),一种是function的类(i.e.,功能类). 对于构造entity的类,包括这种entity的属性已经它本身具备的功能: 而fu ...
    
			
    7. 
						
  7. 魔法禁书目录2：回家（codevs 3024）
			
    题目描述 Description 大妈打完三战回家,我知道他是怎么回来的,欧洲到日本有L个站点他决定乘坐恰好n次飞机(不是学院都市的超音速飞机)和m次火车来从第一个站点到达最后一个站点.但是有一点很重 ...
    
			
    8. 
						
  8. python基础——枚举类
			
    python基础——枚举类 当我们需要定义常量时,一个办法是用大写变量通过整数来定义,例如月份: JAN = 1 FEB = 2 MAR = 3 ... NOV = 11 DEC = 12 好处是简单 ...
    
			
    9. 
						
  9. Mysql undo与redo Log
			
    http://mysql.taobao.org/monthly/2015/04/01/ http://www.cnblogs.com/Bozh/archive/2013/03/18/2966494.h ...
    
			
    10. 
						
  10. react.js基本操练
			
    慢慢了解其它的JS前端框架... var data = [{ "when": "2 minutes ago", "who": "J ...
    
			
    11.