AugularJS从入门到实践(必看篇)


Posted in Javascript onJuly 10, 2017

前 言

前端

AngularJS是为了克服HTML在构建应用上的不足而设计的。(引用百度百科)

AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。(引用百度百科)

例如:

使用双大括号{{}}语法进行数据绑定;

使用DOM控制结构来实现迭代或者隐藏DOM片段;

支持表单和表单的验证;

能将逻辑代码关联到相关的DOM元素上;

能将HTML分组成可重用的组件。

本篇学习主要有两个部分:

①【AngularJS 常用指令】

②【AngularJS 的 mvc 】
 

1、AngularJS 常用指令

【常用指令】

1.na-app:声明angularjs所管辖的区域,一般写在body或者HTML上原则一个一面只写一个

<body ng-app=""> </body>

2.ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

<input type="text" id="input" ng-model="name"/>

3.ng-bind 指令把应用程序数据绑定到 HTML 视图。

①<div id="div" ng-bind="name"></div>
②<div>{{name}}</div>

4.ng-init 指令初始化 AngularJS 应用程序变量。

<body ng-app="" ng-init="name=123"></body>

5.表达式:{{}}绑定表达式,可以包含数字、运算符和变量。但表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=”代替

{{5+""+5+',Angular'}}

【基本感念】

指令:AngularJS中,通过扩展HTML的属性提供功能 ↓↓↓↓(菜鸟教程中的原话)

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

2、AngularJS 的 mvc

【mvc三层框架】

1、 Model(模型):应用程序中处于处理属性局的部分。(保存或修改数据到数据库、变量等)。AugularJS中的Model特征的是:数据

view(视图):用户看到的而用于显示数据的页面

controller(控制器):应用程序中处理用户交互的部分。负责从视图读取数据,控制用户输入,并项目性发送数据。

2、工作原理:用户从视图层发送请求,controller接收到请求后转发给对应的model处理,medle处理完成后返回结果给controller,并在view成反馈给用户。

创建一个angular模块,即ng-app所绑定的部分,需要传递两个参数:

① 模块名称,即ng-app所需要绑定的名称。ng-app="myApp";

② 数组:需要注入的模块名称,不需要可为空。

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

在Angular模块上,创建一个控制器Controller,需要传递两个参数称。

① ng-controller="myCtrl"

② controller的构造函数:构造函数可以传入多个参数,包括$scope/$roatScope以及各种系统内置对象

【angularJS中的作用域】

①$scope:局部作用域,声明在$scope上的属性和方法,只能在当前Controller中使用;

②$rootScope:根作用域,声明在$rootscope上的熟悉感和方法可以在ng-app所包含的任何区域使用(无论是否同意controller,或是否在controller包含范围中)。

>>> 若没有使用$scope 声明变量,而直接在html中使用ng-model绑定的变量作用域为:

1.如果ng-model在某个ng-controller中,则此变量会默认绑定到当前Controller的$scope上

2.如果ng-model没有在任何一个ng-controller中,则此变量将绑定在$rootScope上。

效果图如下:

AugularJS从入门到实践(必看篇)

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .div1{
        width: 300px;
        height: 100px;
        background-color: #00BFFF;
      }
    </style>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl">
      <input type="text" ng-model="name"/>
      <div ng-bind="name" class="div1"></div>
      <div ng-bind="age" class="div1"></div>
      <div ng-bind="classes" class="div1"></div>
      <div ng-bind="classes.name" class="div1"></div>
      <div ng-bind="classes.age" class="div1"></div>
      <div ng-bind="classes.sex" class="div1"></div>
      
    </div>
    <div ng-controller="myCtrl1">
      <input type="text" ng-model="name"/>
      <div ng-bind="name" class="div1"></div>
      <div ng-bind="age" class="div1"></div>
    
    </div>
      
  </body>
  <script language="JavaScript" src="angular-1.5.6/angular.js"></script>
  <script type="text/javascript">
    var app = angular.module("myApp",[]);  
    app.controller("myCtrl",function($scope){
      $scope.name = "帅哥" ;
      $scope.age = "18岁";
      $scope.classes = {
          name:"张三",
          age:"16岁",
          sex:"男"
        
      };
      
    });
    
    app.controller("myCtrl1",function($rootScope){
      $rootScope.name = "hahaha" ;
          });
    
  </script>
</html>

以上这篇AugularJS从入门到实践(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 #Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 #Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 #Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 #Javascript
vue子父组件通信的实现代码
Jul 09 #Javascript
vue2中filter()的实现代码
Jul 09 #Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 #Javascript
You might like
php中simplexml_load_file函数用法实例
2014/11/12 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
window.name代替cookie的实现代码
2010/11/28 Javascript
jquery each()源代码
2011/02/14 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
django框架auth模块用法实例详解
2019/12/10 Python
python爬虫要用到的库总结
2020/07/28 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
如何进行Linux分区优化
2013/02/12 面试题
大学生求职信范文应怎么写
2014/01/01 职场文书
社会调查研究计划书
2014/05/01 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
浅谈Redis的事件驱动模型
2022/05/30 Redis