使用 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. 超链接弹出QQ对话框
			
    <a href="tencent://message/?uin=371820621">java技术交流群57388149</a>
    
			
    2. 
						
  2. CString 操作
			
    CString Left( int nCount ) const;                   //从左边1开始获取前 nCount 个字符 CString Mid( int nFirst ) ...
    
			
    3. 
						
  3. CLR via C#（08）-操作符
			
    对于操作符,我们并不陌生,例如+,-,*,%等二元操作符,以及++,!等一元操作符.但是对于非基元类型,我们需要通过一些自定义方法才能使用这些操作符.今天主要和大家分享关于操作符重载和转换操作符的知识 ...
    
			
    4. 
						
  4. 【翻译一】java-并发
			
    Lesson: Concurrency Computer users take it for granted that their systems can do more than one thing ...
    
			
    5. 
						
  5. AOP常用术语
			
    1.连接点(Joinpoint) 程序执行的某个特定位置:如类开始初始化前,类初始化后,类某个方法调用前,调用后,方法跑出异常后.一个类或一段程序代码拥有一些具有边界性质的特定点.这些代码中的特定点就 ...
    
			
    6. 
						
  6. hdu 4763 kmp ***
			
    找AEAEA形式的字符串最长的A长度,E可以为空 只可意会,不可言传,懂kmp即可 #include <stdio.h> #include <string.h> #includ ...
    
			
    7. 
						
  7. 在VS 2015中边调试边分析性能
			
    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 对代码进行性能分析,之前往往是一种独立的Profiling过程,现在在VS 2015中可以结 ...
    
			
    8. 
						
  8. Effective C++ 之 Item 6 ： 若不想使用编译器自动生成的函数，就该明确拒绝
			
    Effective C++ chapter 2. 构造 / 析构 / 赋值运算 (Constructors, Destructors, and Assignment Operators) Item 6 ...
    
			
    9. 
						
  9. android倒计时(整理)
			
    android倒计时 用到CountDownTimer Android中文API(143) —— CountDownTimer 前言 本章内容android.os.CountDownTime章节,版本 ...
    
			
    10. 
						
  10. Android JNI开发生成.h头文件问题（转）
			
    在JNI开发中,首先要将建立的anroid类编译成.h文件,编译用到命令javah,由于第一次用,以前对java的编译过程也不怎么了解,所以走了好多弯路,网络没有对这一步的详细介绍,这里讲一下: 通过 ...
    
			
    11.