Angular入门(一)

Angular 简介

什么是 AngularJS

  • 一款非常优秀的前端高级 JS 框架
  • 最早由 Misko Hevery 等人创建
  • 2009 年被 Google 公式收购,用于其多款产品
  • 目前有一个全职的开发团队继续开发和维护这个库
  • 有了这一类框架就可以轻松构建 SPA 应用程序
  • 轻松构建 SPA(单一页面应用程序)
  • 单一页面应用程序:
    • 只有一个页面(整个应用的一个载体)
    • 内容全部是由AJAX方式呈现出啦的
  • 其核心就是通过指令扩展了 HTML,通过表达式绑定数据到 HTML。

为什么使用 AngularJS

  • 更少的代码,实现更强劲的功能
  • 将一些以前在后台开发中使用的思想带入前端开发
  • 带领当前市面上的框架走向模式化或者架构化

AngularJS 的核心特性

  • MVC
  • 模块化
  • 自动化双向数据绑定
  • 指令系统

相关链接

Angular 上手

安装 Angular

简单示例

<!--
所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中
ng-app是ng的入口,表示当前元素的所有指令都会被angular管理(对每一个指令进行分析和操作)
-->
<div ng-app ng-init="user.name='world'">
    <h1>使用NG实现双边数据绑定</h1>
    <input type="text"
      placeholder="请输入你的姓名"
      ng-model="user.name">
    <p>hello <strong>{{user.name}}</strong></p>
 </div>
  • angular中最重要的概念是指令(directive)

  • ng-model 是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的user.name建立绑定关系

分析 Angular 示例

<body>
  <div ng-app="myApp" ng-controller="DemoController">
    <h1>使用NG实现双边数据绑定</h1>
    <input type="text" placeholder="请输入你的姓名" ng-model="user.name">
    <p>hello <strong>{{user.name}}</strong></p>
    <input type="button" ng-click="show()">
  </div>
  <script src="bower_components/angular/angular.js"></script>
  <script>
    // 注册模块 通过module函数,
    // 第一个参数是这个模块的名字
    // !!! 第二个参数是这个模块所依赖的模块, 如果不依赖任何模块也必须传递第二个参数,如果没有传递第二个参数,angular.module就不是创建一个模块
    // angular.module 返回 刚刚创建的模块对象
   var app=  angular.module('myApp',[]);
    // app.controller 方法用于创建一个控制器,所创建的控制器属于myApp模块
    // app.controller('DemoController');
    // 控制器函数的参数中有一个$scope
    // angular.module('myApp').controller('DemoController', function($scope) {
    //   // 当控制器执行时会自动执行的函数
    //   $scope.user = {};
    //   $scope.user.name = '张三';
    //   // $scope不仅仅可以往视图中暴露数据,还可以暴露行为
    //   $scope.show = function() {
    //     console.log($scope.user);
    //   };
    // });
    // 由于压缩代码会改变参数名称,注册控制的标准方式就是通过第二个参数传递数组的方式(数组的成员最后一个就是原本的控制器函数,前面的成员都是需要注入的对象名称)
    app.controller('DemoController', ['$scope','$http', function(a,b) {
     // 官方的API中提供了一个$scope.$watch方法,
      a.$watch('user.name', function(now, old) {
        // 当user.name发生变化时触发这个函数
        // console.log('now is ' + now);
        // console.log('old is ' + old);
      });
    }]);
  </script>
</body>

Angular 基础概念

MVC 思想

什么是 MVC 思想

  • 将应用程序的组成划分为三个部分:Model View Controller
  • 控制器的作用就是初始化模型用的;
  • 模型就是用于存储数据的;
  • 视图用于展现数据
  • 登陆案例:
  • 模型
    • 我们数据库中所有用户的信息
    • 接受控制器传来的用户名和密码进行校验的业务逻辑并返回true/false
  • 控制器
    • 接受用户在界面上填写的用户名和密码
    • 将用户名和密码交给模型
  • 视图
    • 给用户呈现一个表单
    • 接受用户输入内容,并将其提交给控制器
    • 根据控制器返回的数据,响应用户页面

模块(Module)

  • 划分应用程序结构
  • 我们可以通过angular.module创建一个模块
  • angular.module方法传递两个参数才是创建模块,一个参数是获取模块

控制器(Controller)

  • 控制器的三种主要职责:
  • 为应用中的模型设置初始状态
  • 通过$scope对象把数据模型或函数行为暴露给视图
  • 监视模型的变化,做出相应的动作

视图模型($scope)

  • 视图和控制器之间的桥梁
  • 用于在视图和控制器之间传递数据
  • 利用$scope暴露数据模型(数据,行为)

表达式(Expression)

  • 作用:
  • 使用 表达式 把数据绑定到 HTML。
  • 语法:
  • 表达式写在双大括号内:{{ expression }}。
  • 比较:
  • 表达式作用类似于ng-bind指令
  • 建议更多的使用指令
  • 数字 {{ 100 + 100 }}
  • 字符串 {{ 'hello' + 'angular' }}
  • 对象 {{ zhangsan.name }}
  • 数组 {{ students[10] }}
  • 注意:
  • AngularJS 表达式可以写在 HTML 中。
  • AngularJS 表达式不支持条件判断,循环及异常。
  • AngularJS 表达式支持过滤器。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容