使用 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. IOS-多线程技术
			
    三种: •NSThread: –优点:NSThread 比其他两个轻量级,使用简单 –缺点:需要自己管理线程的生命周期.线程同步.加锁.睡眠以及唤醒等.线程同步对数据的加锁会有一定的系统开销 •NSO ...
    
			
    2. 
						
  2. Java IO流总结
			
    Java IO流分类以及主要使用方式如下: IO流 |--字节流 |--字节输入流 InputStream: int read();//一次读取一个字节 int read(byte[] bys);// ...
    
			
    3. 
						
  3. Office文件的Open Xml 格式
			
    获取Office文件的Open Xml格式文件的步骤如下: 1.修改想要得到OpenXml格式文件的文件后缀名为.rar. 2.解压即可得到. 此时可以对xml文件进行操作,要想再次把这已经解压后的文 ...
    
			
    4. 
						
  4. LinkIssue: Error 'LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or cor
			
    参考:http://blog.csdn.net/junjiehe/article/details/16888197 使用VisualStudio 编译链接中可能出现如下错误: LINK : fatal ...
    
			
    5. 
						
  5. NYOJ题目874签到
			
    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAswAAAIzCAIAAACbd9iBAAAgAElEQVR4nO3dPXLjSNou0G8T8rUQ2V
    
			
    6. 
						
  6. CSDN-markdown编辑器
			
    欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接 ...
    
			
    7. 
						
  7. jq  确定删除方法与文件删除
			
    var choice=confirm("您确认要删除吗?", function() { }, null);                if(choice)            ...
    
			
    8. 
						
  8. 14.模板方法模式(Template Method)
			
    using System; namespace ConsoleApplication7 { class Program { /// <summary> /// 模板方法模式——在一个抽象类 ...
    
			
    9. 
						
  9. Delphi中exit、break、continue等跳出操作的区别
			
    Delphi中表示跳出的有break,continue,abort,exit,halt,runerror等 1.break 强制退出最近的一层循环(注意:只能放在循环里:而且是只能跳出最近的一层循环) ...
    
			
    10. 
						
  10. IReport问题整理
			
    1. 问题:IReport如何实现变量字段$F{ propertyName}赋值为一个NULL对象时不显示”null”, 而显示为空白? 解决方法:选中动态单元格,右键选择属性,在弹出对话框TextF ...
    
			
    11.