从零学习Angularjs-编写第一个Angularjs以及ng-指令大全

1.Angularjs的加载方式

当网页加载完毕,AngularJS 自动开始执行; HTML 页面中 ng-xxx 的属性称之为指令(Directive); ng-app 指令告诉 AngularJS, 元素是 AngularJS 应用程序管理的边界; {{ }} 双花括号里面的叫做数据绑定表达式,可以是任何有效的JavaScript值、变量或语句。而在页面上显示的是表达式计算后的结果值。

举个栗子:

<html ng-app>
  <head>head>
  <body>
     {{"从零学习Angularjs-编写第一个Angularjs"}}
  body>
html>

2.Module.controller() 控制器

第二行代码创建了一个名为userCtrl的控制器,以及一个控制器函数
控制器函数接受一个名为$scope的参数

var app = angular.module(“myApp”, []);          //myApp模块名 app是模块实例
app.controller(“userCtrl” ,function($scope){   //userCtrl是控制器的名字
            $scope.name= “小明”;        //$scope用来保存数据,定义方法
});

3.ng-指令大全

(1)ng-model

    ng-model 指令把文本框的值绑定到变量 name 上; {{ name }} 表达式就是把应用程序变量 name 绑定到某个dom元素的innerHTML。

请输入你的名字:<input type="text" id="username" ng-model="name"> 
你的名字是: <span>{{name}}span>

(2)ng-bind指令

    ng-bind 指令将指定变量或表达式的值显示在元素的innerHTML 如果给定的变量或表达式修改了,指定元素的 innerHTML 也会修改。
    

type="text" ng-model="text"> --将文本框的值绑定到text变量 你输入的值是:

"text"> --动态显示text变量的值

(3)ng-init 指令

    初始化应用时创建一个变量,并给变量赋值 ng-init 执行给定的表达式 建议用controller代替。

<div ng-app="" ng-init="myText='Hello World!'">

<h1>{{myText}}h1>

(4)ng-click指令

Angular的点击事件处理器,给元素通过click事件绑定$scope对象的方法。

"text" ng-model="text"> 

$scope.show = function(){ alert("您输入的内容是:" + $scope.text); }

(5)ng-repeat 指令

  根据绑定数组成员的数量,复制被绑定的元素 在ng-repeat指令复制元素的过程中,还提供了几个专有变量:

   $index 返回当前对象或属性的下标

   $first 当前对象为集合中的第一个对象时返回true

   $last 当前对象为集合中的最后一个对象时返回true

   $middle 当前对象既不是集合中第一个对象又不是最后一个对象返回true

   $even 集合中的偶数编号返回true

   $odd 集合中的奇数编号返回true ng-repeat-start ng-repeat-end 重复生成多个顶层元素
(6)ng-class 指令
  给元素添加CSS类:不能直接添加类名,需通过以下三种方式添加:
  
  1. 直接绑定值为CSS类名的$scope对象属性:
  


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <style>
        .red {
            color: red;
        }
    style>
head>
<body ng-app="myApp">
<div ng-controller="listController">
    <span ng-class="red1">小明span>
div>

<script src="../../script/angular.min.js">script>
<script>
    var app = angular.module("myApp", []);
    app.controller("listController", function($scope) {
        $scope.red1='red';
    });
script>
body>
html>

2. 以字符串数组方式选择性添加CSS类 表达式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .style1 {
            height: 200px;
            width: 200px;
            background: salmon;
        }

        .style2 {
            background: violet;
        }
    style>
head>
<body>
<div ng-app ng-init="data={style1:true,style2:false}">
    
    <div ng-class="{style1:data.style1,style2:data.style2}">div>
    
    <input type="button" value="变化颜色" ng-click="data.style2 = !data.style2">
div>
<script src="../../script/angular.min.js">script>
    <script>
        var data = {
            style1:true,
            style2:false
        }
    script>
body>
html>

3.通过key/value对象的方式添加多个CSS类


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <style>
        .red {
            color: red;
        }
        .green {
            color: greenyellow;
        }
    style>
head>
<body ng-app="myApp">
<div ng-controller="listController">
    <ul>
        <li ng-repeat = "item in datas" ng-class="{red:item.startsWith('张')">{{ item }}
        li>
    ul>
div>

<script src="../../script/angular.min.js">script>
<script>
    var app = angular.module("myApp", []);
    app.controller("listController", function($scope) {
        $scope.datas = ["张三","李四","王五","赵六","张"];
    });
script>
body>
html>

(7)ng-style 指令

    ng-style 指令为 HTML 元素添加 style 属性。 ng-style 属性值必须是对象,表达式返回的也是对象 对象由 CSS 属性和值注册,即 key:value 。

ng-style=” {color: 'white'}”

(8)ng-show/ng-hide指令

    ng-show 值为true或flase 显示或隐藏元素 ng-hide 值为true或flase 隐藏或显示元素。

(9)ng-if指令

    从DOM中添加和移除元素 ng-if=”true”时保留元素 ng-if=“false”时移除元素。

(10)ng-swich指令

ng-switch-when =“” 值为指定value值的时候 显示元素。

ng-switch-default 没有匹配的value值时显示元素。

(11)ng-link/ng-src指令

    绑定元素的link或src地址 AngularJS 设置图片地址的指令:ng-src AngularJS 代码执行前不显示图片。

(12)ng-include指令

    该指令从服务器获取一段HTML片段,编译并处理该片段中包含的任何angular指令,并添加到DOM元素中。

<ng-include src=" 'a.html' " >ng-include>

    src: 指定要加载内容的URL src的值必须为表达式 onload: 指定一个在内容被加载时调用的表达式 autoscroll:指定内容在加载时是否滚动到这部分视图所在的区域。

(13)ng-cloak指令

    使用一个CSS样式隐藏内联绑定表达式,(在文档第一次加载会短暂可见)。 ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。 AngularJS 应用在加载时,文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果, ng-cloak 指令是为了防止该问题的发生。 该指令没有参数。

<span ng-cloak>{{ 表达式 }}span>

4.Module.directive自定义指令

  指令是Angular最强大的特性,通过指令能扩展并增强HTML。 当内置指令无法满足需求时,可以创建自定义指令。 自定义指令是通过Module.directive方法创建的。 Module.directive() 方法接受两个参数,第一个是指令名,第二个是函数。 该函数用return语句返回另一个指令函数,使用该自定义指令,Angular就会调用这个函数。 指令函数接受三个参数,第一个scope,用于检查在视图中可用的数据。 第二个参数element是一个jqLite对象,jqLite是Angular提供一个剪裁版本的jQuery 第三个参数是attrs。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <script src="../../script/angular.min.js">script>
    <script>
        var m= angular.module("my", [])
        m.controller("ctr1", function ($scope) {
            $scope.dayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            $scope.today = $scope.dayNames[new Date().getDay()];
            //getDay星期是从0开始的,星期日的下标是0
        });
        m.controller("ctr2", function ($scope) {
            $scope.dayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            $scope.tommorrow = $scope.dayNames[(new Date().getDay() + 1) % 7];
        });
        m.directive('highlight', function () {
            return function (scope,element,attrs) {
                if(scope.today == attrs['highlight']){
                    element.css("color",'red');
                }else{
                    element.css("color",'green')
                }
            }
        })
    script>
head>
<body ng-app="my">
<div class="container">
    <h2>今天是星期几?h2>
    <p ng-controller="ctr1" highlight="星期二">今天是{{ today }}p>
    <p ng-controller="ctr2" highlight="星期一">明天是{{ tommorrow }}p>
div>
body>
html>

你可能感兴趣的:(前端技术)