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 相关文章推荐
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
如何使用JavaScript实现栈与队列
Jun 24 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+mysql事务rollback&amp;commit示例
2010/02/08 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
php swoft框架实例用法
2020/12/22 PHP
三级下拉菜单的js实现代码
2011/05/23 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
javascript求日期差的方法
2016/03/02 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
js实现随机点名器精简版
2020/06/29 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
分析经典Python开发工程师面试题
2019/04/08 Python
Python之指数与E记法的区别详解
2019/11/21 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
2014年教师培训的自我评价
2014/01/03 职场文书
上班迟到检讨书
2014/01/10 职场文书
团队激励口号
2014/06/06 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
十八大标语口号
2014/10/09 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL