<html ng-app="notesApp">

 <head><title>Notes App</title></head>

 <body ng-controller="MainCtrl as ctrl">

   <form ng-submit="ctrl.submit()" name="myForm">

     <input type="text"

        name="uname"

        ng-model="ctrl.user.username"

        required

        ng-minlength="4">

     <span ng-show="myForm.uname.$error.required">

       This is a required field

     </span>

     <span ng-show="myForm.uname.$error.minlength">

       Minimum length required is 4

     </span>

     <span ng-show="myForm.uname.$invalid">

       This field is invalid

     </span>

     <input type="password"

        name="pwd"

        ng-model="ctrl.user.password"

        required>

     <span ng-show="myForm.pwd.$error.required">

       This is a required field

     </span>

     <input type="submit"

        value="Submit"

        ng-disabled="myForm.$invalid">

   </form>

 <script src="http://riafan.com/libs/angular.js"></script>

 <script type="text/javascript">

   angular.module('notesApp', [])

     .controller('MainCtrl', [function() {

       var self = this;

       self.submit = function() {

         console.log('User clicked submit with ', self.user);

       };

     }]);

 </script>

 </body>

 </html>
ng-controller="MainCtrl as ctrl"，允许数据可以在同一个页面的不同的controller之间自由穿梭。。。

Create a reference to this in our controller.

angular.module('app').controller('MainCtrl', function ($scope){

  var self = this;

Remove $scope from our controller dependency, and use self instead of $scope.

angular.module('app').controller('MainCtrl', function (){

  var self = this;

  self.message = 'hello';

  self.changeMessage = function(message){

    self.message = message;

  };

});

angularjs的Controller as的更多相关文章

  1. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  2. angularjs 的controller的三种写法

    AngularJS 的controller其实就是一个方法,它有三种写法: 第一种: <pre name="code" class="javascript" ...

  3. Angularjs中controller的三种写法

    在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中cont ...

  4. Angularjs之controller 和filter（四）

    Controller组件(http://www.angularjs.cn/A00C) 在AngularJS中,控制器是一个Javascript函数(类型/类),用来增强除了根作用域以外的作用域实例的. ...

  5. 在AngularJS的controller外部直接获取$scope

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/5560843.html ...

  6. angularJS的controller之间如何正确的通信

    AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJ ...

  7. angularjs 外部调用controller中的方法

    angular.element(document.querySelector('[ng-controller=mainCtrl]')).scope().viewGo('tab.VIPPay_Succe ...

  8. 【angularJS】Controller控制器

    1. 定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ng-controller指 ...

  9. AngularJS-01.AngularJS,Module,Controller,scope

    1.AngularJS 一个构建动态Web应用程序的结构化框架. 基于JavaScript的MVC框架.(  MVC ---- Model(模型).View(视图).Controller(控制器) ) ...

  10. angularJS中controller的通信

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. class 3 求数组中的最大值（单元测试）

    1.问题引出: int Largest(int list[], int length) { int i,max; ; i < (length – ); i ++ ) { if(list[i] & ...

  2. react+webpack+wepack-dev-server的环境中ant design图标离线的方法

    1.首先说说我老姜对官方提供的demo的理解, 在理解的过程也学到了不少知识. 上图(图0)展示的官网demo的目录结构,node_modules是自己用node下载的, iconfont中是自己的离 ...

  3. WebGL学习笔记四点一

    上一章是对图形的变换,这一章的第一节主要介绍了光栅化的过程,在创建多个颜色的三角形的过程中顶点着点器的过程如下 ,1.首先通过attribute的变量从javascript中获取数据,根据drawAr ...

  4. c++第七次作业____最后的总结

    先言: 在这过程中学到: 第二次作业Github的使用 第四次作业计算器的计算 ps:表达式处理以及计算 第五次作业文件的处理问题 第六次作业界面的设计 总结: 1.这学期的计算器,做的有点匆忙,偶尔 ...

  5. JVM的GC策略

    1 前言 GC(Garbage Collect)是jvm对于内存管理的核心功能,正是因为它才让Java程序员从内存释放的苦海中脱离出来,所以作为一个程序员都有必要去了解一下他的原理. 说一句题外话,我 ...

  6. Mongodb 分片操作 介绍

    为什么需要分片操作?由于数据量太大,使得CPU,内存,磁盘I/O等压力过大.当MongoDB存储海量的数据时,一台机器可能不足以存储数据,也可能不足以提供可接受的读写吞吐量.这时,我们就可以通过在多台 ...

  7. 蜗牛慢慢爬 LeetCode 20. Valid Parentheses [Difficulty: Easy]

    题目 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the i ...

  8. Scrum 冲刺博客链接集合

    DAY1 http://www.cnblogs.com/qiaokeliweibaba/p/8901187.html DAY2 http://www.cnblogs.com/qiaokeliweiba ...

  9. app token session rsp

    引用:https://blog.csdn.net/jack85986370/article/details/51362278 一.登录机制 粗略地分析, 登录机制主要分为登录验证.登录保持.登出三个部 ...

  10. [转帖] dd 命令图解

    dd命令-->dd是disk dump的缩写,指定大小的块拷贝一个文件,同时进行指定的转换,起到一个初始化磁盘的作用  https://blog.csdn.net/jerry_1126/arti ...