使用 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. .NET微信公众号开发-3.0查询自定义菜单
			
    一.前言 前面我们已经创建好了我们的自定义菜单.那么我们现在要如何查询我们自定义的菜单.原理都是一样的,而且都是相当简单,只是接口地址文档换掉了. 2.0开始编码 同样我们首先创建好我的查询页面,在这 ...
    
			
    2. 
						
  2. cookie的设置、获取以及删除
			
    首先介绍一下cookie的基本信息: cookie是以域为单位的,它必须放在服务器的的环境下,但是cookie的容量小,只有4kb,并且也不安全,还有入股cookie的名字相同,会修改或者覆盖原来的值 ...
    
			
    3. 
						
  3. PHP之MVC项目实战
			
    本文主要包括以下内容 类文件自动加载 路径管理 页面跳转 注册自动加载方法 配置文件系统 cookie session 类文件自动加载 在PHP中使用别的类时,需要载入类文件,如果类很多的话,需要重复 ...
    
			
    4. 
						
  4. DBCC常用命令小汇
			
    DBCC是SQL Server提供的一组控制台命令,功能很强大,掌握一些必要的语句,对操作数据库有不少帮助,所以决定整理一下,发现已有不少类似的整理,减少了不少工作,归类如下: 一.DBCC 帮助类命 ...
    
			
    5. 
						
  5. XAML语言介绍
			
    <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winf ...
    
			
    6. 
						
  6. 图结构练习——最短路径（floyd算法(弗洛伊德)）
			
    图结构练习——最短路径 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述  给定一个带权无向图,求节点1到节点n的最短路径.   输 ...
    
			
    7. 
						
  7. PHP获取用户真实IP
			
    function get_client_ip() { if(getenv('HTTP_CLIENT_IP') && strcasecmp(getenv('HTTP_CLIENT_IP' ...
    
			
    8. 
						
  8. WPF实现TextBox水印效果
			
    在日常项目中,一个TextBox需要输入用户名,我们通常的做法是先用一个TextBlock来说明,例如下面的截图: 今天将使用另外一种方式来展示,使用水印的方式.请参考下面的代码: <Windo ...
    
			
    9. 
						
  9. RTP/RTCP的时间同步机制
			
    转自:http://blog.csdn.net/leesphone/article/details/5571972 RTP支持传送不同codec的steaming,不同codec的clock rate ...
    
			
    10. 
						
  10. 如何在java程序中调用linux命令或者shell脚本
			
    转自:http://blog.sina.com.cn/s/blog_6433391301019bpn.html 在java程序中如何调用linux的命令?如何调用shell脚本呢? 这里不得不提到ja ...
    
			
    11.