1.angularJs简介

　　angularJs是一个MV*的javascript框架（Model-View-Whatever,不管是MVVM还是MVC，统归MDV（model drive view））,其实是由google推出的SPA(single-page-application)应用框架。它的用于 数据在后端和前端之间的双向绑定。这就意味着你在后台改变数据，这些变动立刻就会出现在view上。

　　在加载的时候，angular会将你的dom树和javascript转向一个angular app 。包含着angular指令和过滤器的html会被编译成一个树图，响应的范围和控制器会被附加在这个树上，内部的应用循环确保了视图和模型之间的数据绑定。每次模型被更新（可以通过ajax请求，也可以直接操作控制器），angular会重新运行它的 $digest循环，跟新数据绑定确保所有东西是同步的。

　　js代码是用一种命令的方式操作dom。而在angular中，直接操作dom是不被提倡的。dom由视图管理，data在scope中，方法在控制器里。

3. ng-app

　　(1)代码预览，引入angular文件

　　

　　（2）游览器里效果

　　

　　（3）源码

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="../build/angular.min.js" charset="utf-8"></script>

  </head>

  <body>

      <div class="" ng-app>

        hello{{'world'}}

      </div>

  </body>

</html>

4. ng-model

　　(1)代码预览

　　

　　（2）游览器里效果

　　

　　(3)源码

　　

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="../build/angular.min.js" charset="utf-8"></script>

  </head>

  <body>

    <div class="" ng-app>

      your name :

      <input type="text" name="name" value="" ng-model="yourname" placeholder="angular">

      <hr>

      hello {{yourname || 'angular'}}

    </div>

  </body>

</html>

5.ng-controller

　　(1)代码预览

　　

　　（2）游览器效果

　　

　　（3）源码

　　

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>hello cynthia</title>

    <script src="../build/angular.min.js" charset="utf-8"></script>

  </head>

  <script type="text/javascript">

    var app = angular.module('app',[]);

    app.controller('helloCynthia',function($scope){

      $scope.eleName = "cynthia"

    })

  </script>

  <body>

    <div class="" ng-app='app' ng-controller='helloCynthia'>

      hello,{{eleName}}

    </div>

  </body>

</html>

6.ng-repeat

　　(1)代码预览

　　

　　（2）游览器效果

　　

　　（3）源码

　　

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="../build/angular.min.js" charset="utf-8"></script>

  </head>

  <script type="text/javascript">

    var app = angular.module('ngrepeat',[])

    app.controller('ngrepeatCtr',function($scope){

      $scope.developers=[

        {name:'wuqian',country:'china'},

        {name:'cynthia',country:'usa'},

        {name:'wupore',country:'canada'},

        {name:'selene',country:'english'}

      ]

    })

  </script>

  <body>

    <div class="" ng-app='ngrepeat' ng-controller='ngrepeatCtr'>

      <ul>

        <li ng-repeat='person in developers'>

          {{person.name}} from {{person.country}}

        </li>

      </ul>

    </div>

  </body>

</html>

7.example

　　(1)代码预览

　　

　　（2）游览器效果 （用户在input里输入后，点击button，在下方显示输入,但是目前显示undefined。。。）　

　　

　　（3）源码

　　

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="../build/angular.min.js" charset="utf-8"></script>

  </head>

  <script type="text/javascript">

    var app = angular.module('appName',[]);

    app.controller('controllerName',function($scope){

      $scope.clickName = function(){

        $scope.message = 'Name : ' + $scope.userInput;

      }

    })

  </script>

  <body>

    <div class="" ng-app='appName' ng-controller='controllerName'>

      <p>

        what's your name ?

      </p>

      <br>

      <input type="text" name="name" placeholer="input your name here" ng-model＝‘userInput’>

      <button type="button" name="button" ng-click='clickName()'>click here</button>

      <h3>{{message}}</h3>

    </div>

  </body>

</html>

　

8.filters 过滤器

　　angular提供的过滤器和unix中的管道pipeline相似。比如我们要在网页中显示价格$可以这样写

　　（1）源码预览

　　

　　（2）游览器中效果

　　

　　（3）源码

　　

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="../build/angular.min.js" charset="utf-8"></script>

  </head>

  <body>

      <div class="" ng-app>

        <span>iphone : {{63573 | currency}}</span>

      </div>

  </body>

</html>

9.利用filters做删选

　　（1）代码预览

　　

　　（2）游览器效果

　　

　　（3）源码　

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="../build/angular.min.js" charset="utf-8"></script>

  </head>

  <script type="text/javascript">

    var app = angular.module('ngrepeat',[])

    app.controller('ngrepeatCtr',function($scope){

      $scope.developers=[

        {name:'wuqian',country:'china'},

        {name:'cynthia',country:'usa'},

        {name:'wupore',country:'canada'},

        {name:'selene',country:'english'}

      ]

    })

  </script>

  <body>

    <div class="" ng-app='ngrepeat' ng-controller='ngrepeatCtr'>

      <input type="text" name="name" value="" ng-model='search'>

      <ul>

        <li ng-repeat='person in developers | filter:search'>

          {{person.name}} from {{person.country}}

        </li>

      </ul>

    </div>

  </body>

</html>

10.自定义filter

　　(1)代码预览

　　

　　（2）游览器效果（首字母变大写）

　　

　　（3）源码

　　

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>hello cynthia</title>

    <script src="../build/angular.min.js" charset="utf-8"></script>

  </head>

  <script type="text/javascript">

    var app = angular.module('app',[]);

    // 自定义filter

    app.filter('capt',function(){

      return function(input,param){

        return input.substring(0,1).toUpperCase()+input.substring(1);

      }

    })

  </script>

  <body>

    <div class="" ng-app='app'>

      <span>{{'this is some text' | capt}}</span>

    </div>

  </body>

</html>

11.services

　　在controller之间共享数据对我们是很有用的，但是每个controller都有自己的scope，所以我们不能将其绑定到其他的controller上。为此angular提供了的解决方案是services。

　　angular内置了很多services，比如http请求、异步promises编程模式。这也是angular的核心（依赖注入）的关键。

　　services都是单例的，也就是说在一个应用里，每个service对象只会被实例化一次。它主要负责提供一个接口把特定的函数需要的方法放在一起。最常见的方法是angular.module API的factory方式：

　　例子：通过services实现oneCtrl和twoCtrl之间共享一个数据 user

　　（1）源码预览

　　

　　（2）游览器里面效果

　　

　　（3）源码

　　

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>hello cynthia</title>

    <script src="../build/angular.min.js" charset="utf-8"></script>

  </head>

  <script type="text/javascript">

    var app = angular.module('app',[]);

    // 通过services实现oneCtrl和twoCtrl之间共享一个数据 user

    app.factory('userInfor',function(){

      var user={

        name : 'Angular.js'

      }

      return user;

    })

    app.controller('oneCtrl',function($scope,userInfor){

      $scope.user = userInfor;

    })

    app.controller('twoCtrl',function($scope,userInfor){

      $scope.user = userInfor;

    })

  </script>

  <body>

    <div class="" ng-app='app'>

      <div class="" ng-controller='oneCtrl'>

        oneCtrl :

        <input type="text" name="name" value="" ng-model='user.name'>

      </div>

      <div class="" ng-controller='twoCtrl'>

        twoCtrl :

        <input type="text" name="name" value="" ng-model='user.name'>

      </div>

    </div>

  </body>

</html>

12.ng-show 和 ng-hide

　　(1) 源码预览

　　

　　（2）游览器里效果：点击按钮下面的内容出现／隐藏

　　

　　（3）源码

　　

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="../build/angular.min.js" charset="utf-8"></script>

  </head>

  <body>

    <div class="" ng-app>

      <button type="button" name="button" ng-init='shouldShow=true' ng-click='shouldShow = !shouldShow'>Flip the shouldShow variable</button>

      <div class="" ng-show='shouldShow'>

        <h3>showing {{shouldShow}}</h3>

      </div>

      <div class="" ng-hide='shouldShow'>

        <h3>hiding {{shouldShow}}</h3>

      </div>

    </div>

  </body>

</html>

13.

angularJs学习笔记－入门的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. PHP学习笔记 - 入门篇（5）

    PHP学习笔记 - 入门篇(5) 语言结构语句 顺序结构 eg: <?php $shoesPrice = 49; //鞋子单价 $shoesNum = 1; //鞋子数量 $shoesMoney ...

  10. PHP学习笔记 - 入门篇（4）

    PHP学习笔记 - 入门篇(4) 什么是运算符 PHP运算符一般分为算术运算符.赋值运算符.比较运算符.三元运算符.逻辑运算符.字符串连接运算符.错误控制运算符. PHP中的算术运算符 算术运算符主要 ...

随机推荐

  1. Python Tkinter 简单使用

    简单的一些实例,能够实现一般的功能就够用了 Tkinter: 创建顶层窗口: # -*- coding: utf-8 -*- from Tkinter import *   root = Tk() r ...

  2. idea中如何将单个java类导出为jar包文件？

    idea作为一个java开发的便利IDE工具,个人是比较喜欢的,今天来探索个小功能:  导出单个类文件为jar包! 偶有这种需求,就是某个类文件独立存在,但是需要将其导出为jar,供别人临时使用,或者 ...

  3. Python - 网络爬虫（Web Scraping）

    专栏 从零开始写Python爬虫:https://zhuanlan.zhihu.com/Ehco-python requests库的安装与使用:http://t.cn/RTuUuf7 BS4库的安装与 ...

  4. 【app】Hybrid？Native？不知道你就out了！

    Hybrid?是个啥? 相信大家在平常生活中也会经常见到这个词,比如现在比较火的hybrid汽车(混合动力汽车) 那如果是针对于App而言呢? 那就要从App的分类说起了 目前主流应用程序大体分为三类 ...

  5. python高级-面向对象(11)

    一.面向过程和面向对象 面向过程:根据业务逻辑从上到下写代码 面向对象:将数据与函数绑定到一起,进行封装,这样能够更快速的开发程序,减少了重复代码的重写过程 二.类和对象 1.类的概念 面向对象编程的 ...

  6. Anaconda下载地址

    Anaconda installer archive:地址1: https://repo.continuum.io/archive/地址2:https://mirrors.tuna.tsinghua. ...

  7. sql server 备份与恢复系列一 必备知识

    一.备份概述 数据安全是数据库的生命,数据库在使用过程中难免会遇到如:使用者的误操作或是被恶意修改,硬件故障导致数据文件无法被访问,自然灾害导致机房在物理上的损毁.本章从备份与恢复的功能作为解决问题的 ...

  8. GitHub Gist 指南

    Github作为代码分享平台在开发者中非常流行.此平台托管了包括游戏.书籍以至于字体在内的一千两百多万个项目(现在更多),这使其成为互联网上最大的代码库. Github还提供另一个非常有用的功能,就是 ...

  9. [Java Plasterer] Java Components 3：Java Enum

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Reprint it anywhere u want. Written In The Font Whe ...

  10. struts2整合uploadify插件怎样传参数

    关于uploadify3.1,先看下帮助文档中的有些知识. 其中有个onUploadStart方法,我们可以使用这个向后台传参. 下面举个例子, js: <script type="t ...