angular学习第一天

angular是什么？

查看angular简介请访问：点此处访问

怎么下载源文件

下载地址：点击下载

怎么讲？

我打算以实例为导向，讲解各个指令，最后合并所有，做出来一个简单的单页面应用

今天的实例是一个简单的登录功能

先看运行效果

接下来开始 准备结构

//页面头部设置







    

//body 部分代码

  

    
登录
    

    

    

    

  
  

  
你输入的用户名:
  
密码：

样式

引入angularJS

告诉angular他的作用域是什么
什么是作用域，就是告诉它，让它只在某个区域起作用
怎么告诉？用指令ng-app

 
  

      
angular运行的时候会编译这部分
       
Hello {{text}}
  
  

   angular不会管这部分Hello {{text}}
  
  

 

      
angular运行的时候会编译这部分
       
Hello World
  

   angular不会管这部分Hello {{text}}


//说明：
1. ng-app功能： 告诉angular 它的作用域
2. ng-app作用域： 都知道div是双标签，很明显 ng-app 的作用域从节点开始到节点结束，.ignore 没在ng-app 里面所以angular 不管
3、ng-app  适用标签， html div p 等等都是可以的，因为我们有时候需要整个页面都被angular编译，有时候只是需要局部是
4、ng-init 功能  定义这个作用域里面初始时候的数据 例如例子中 初始的时候设置 *text='World'*，就是在作用域里面定义了一个变量text值得World
5、怎么调用变量？  用插件表达式来调用，实例见上边代码  {{text}}，即双大括号里面写入变量名。
6、我想在变量前面加上某个字符串怎么办？你可以这么写 {{"嘿嘿"+text}}；这么写 {{1+2}} ;  这不就是js表达式吗？ Binggo ！！！
7、还有另外一种调用方式，不过这种调用方式依赖标签，如【即ng-bind 指令 的 =号后面写上要绑定的变量名】

那么我们现在告诉angular它的作用域
代码如下

  

    
登录
    

    

    

    

  
  

  
你输入的用户名:
  
密码：

既然页面已经做好了，我们就来处理用户的输入，完成功能吧
代码如下：

  
登录
  

  

  

  



你输入的用户名:{{username}}
密码：{{userpwd}}



相关 JS


//说明
1、ng-controller 是做什么？ ng-controller 是控制的某个作用域部分的
2、他跟ng-app什么关系？    ng-app是控制整个app的，整个app可以由多个ng-controller组成
3、怎么创建一个控制器？  写一个 function 即可 函数名就是控制器名
4、$scope是个什么鬼？     $scope是作用域对象
5、$scope做什么用？   你还记得 ng-init中定义的 text 变量吗？它实际上就是定义在$scope底下，
这样控制器的作用域里面就可以通过插件表达式调用到它，
实际上就相当于  $scope.text="World";
6、$scope 下边可以写方法吗？ 当然可以，你直接就像平常写js哪样，直接给$scope这个对象属性赋值为函数即可
            $scope.func=function(){
                    console.log("我是个函数");
           }
7、定义函数我怎么调用啊？  用事件绑定指令！ng-[我是事件名字]
实例：给元素增加单击事件
ng-click="func()"

8、ng-model 是啥？ 这个指令告诉Angular 等号后边的这个变量需要双向同步
9、什么是双向同步？ 我的理解是你再输入框里面输入的时候，
你输入什么angular就把这个值取到更新到$scope的对应属性上去；同样你再程序里面改动这个属性的时候也会直接反映到页面上。

OK大功告成！！！