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 表单验证扩展(四)
Oct 20 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
关于vue里页面的缓存详解
Nov 04 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初学者头疼问题总结
2006/07/08 PHP
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
潜说js对象和数组
2011/05/25 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
js实现日历
2020/11/07 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
python中self原理实例分析
2015/04/30 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python实现员工管理系统
2018/01/11 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python实现高斯投影正反算方式
2020/01/17 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
村委会换届选举方案
2014/05/03 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
邀请书格式范文
2015/02/02 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android