使用 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. 分页Bean终极封装
			
    package org.guangsoft.vo; import java.util.List; public class Page { private Integer pageNum; privat ...
    
			
    2. 
						
  2. cell分割线宽度不满屏处理
			
    if ([cell respondsToSelector:@selector(setSeparatorInset:)]) { [cell setSeparatorInset:UIEdgeInsetsZ ...
    
			
    3. 
						
  3. MongoDB 基础 -安全性-（权限操作）
			
    和其他所有数据库一样,权限的管理都差不多一样.mongodb存储所有的用户信息在admin 数据库的集合system.users中,保存用户名.密码和数据库信息.mongodb默认不启用授权认证,只要 ...
    
			
    4. 
						
  4. Oracle dbms_lock.sleep()存储过程使用技巧-场景-分析-实例
			
    <Oracle dbms_lock.sleep()存储过程使用技巧>-场景-分析-实例 摘要:今天是2014年3月10日,北京,雾霾,下午组织相关部门开会.会议的结尾一名开发工程师找到了我 ...
    
			
    5. 
						
  5. NYOJ题目1047欧几里得
			
    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAskAAAIcCAIAAACLpKQmAAAgAElEQVR4nO3dv1LjOsMH4O8m6LkQ6l ...
    
			
    6. 
						
  6. 重温WCF之发送和接收SOAP头（三）
			
    SOAP头可以理解为一种附加信息,就是附加到消息正文的内容. 既然消息头是附加信息,那有啥用呢?你可别说,有时候还真有不少用处.举个例子,WCF的身份验证是不是很麻烦?还要颁发什么证书的(当然不是荣誉 ...
    
			
    7. 
						
  7. java Integer == 比较的小问题
			
    示例代码: @Test public void testEquals() { Integer a = 127; Integer b = 127; if(a == b) { System.out.pri ...
    
			
    8. 
						
  8. android 入门-关键词介绍
			
    1.@SuppressLint("HandlerLeak") 2.synchronized详解 http://www.cnblogs.com/GnagWang/archive/20 ...
    
			
    9. 
						
  9. js判断访问的当前设备是手机还是电脑
			
    function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUser ...
    
			
    10. 
						
  10. hdu 4044 2011北京赛区网络赛E 树形dp ****
			
    专题训练 #include<stdio.h> #include<iostream> #include<string.h> #include<algorithm ...
    
			
    11.