angular.js学习笔记(一)

最新推荐文章于 2019-07-02 10:14:00 发布

Lacy-Gr

最新推荐文章于 2019-07-02 10:14:00 发布

阅读量467

点赞数

分类专栏：学习笔记 angular 文章标签： angular html angularjs 前端

本文链接：https://blog.csdn.net/qq_28975099/article/details/55255004

版权

学习笔记同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

angular

4 篇文章 0 订阅

订阅专栏

前言：之前也断断续续接触了angular的相关内容，也没有加以实施运用。AngularJS 使得开发现单一页面应用程序变得更加容易。今天刚好做完了一个angular小demo，借此把之前的学习笔记整合了一下。

指令

ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。

<body ng-app="lacy">
    <div class="demo1">
        <input type="text" ng-model="name"/>
        <p>你输入的是 <span>{{name}}</span></p>
    </div>
</body>

此时控制台报错。为什么？

这里写图片描述

由于ng-app在html里面我用；lacy命名，但在脚本里面并没有定义所以出了错。把代码中的ng-app=”lacy”改为ng-app=”“就不再报错。

这里写图片描述

当网页加载完毕，AngularJS 自动开启。
ng-app 指令告诉 AngularJS，

元素是 AngularJS 应用程序的”所有者”。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

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

<body ng-app="" ng-init="user='lacy'">
    <div class="demo1">
        <input type="text" ng-model="name"/>
        <p>你输入的是 <span>{{name}}</span></p>
        <p ng-bind="user"></p>
    </div>
</body>

ps： HTML5 允许扩展的属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

<div data-ng-app="" data-ng-init="firstName='John'">
    <p>姓名为 <span data-ng-bind="firstName"></span></p>
 </div>

AngularJS 表达式写在双大括号内：{{ expression }}
等价于ng-bind

<p>{{1+1}}</p>
<p>{{name+user}}</p>
<p ng-bind="name+user"></p>

AngularJS 模块（Module）定义了 AngularJS 应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。

<body ng-app="myApp" ng-init="user='lacy'" ng-controller="myCtrl">
    <div class="demo1">
        <input type="text" ng-model="name"/>
        <p>你输入的是 <span>{{name}}</span></p>
        <p ng-bind="user"></p>
        <p>{{1+1}}</p>
    </div>
</body>
<script src="Common/js/angular.min.js"></script>
<script>
    var app = angular.module('myApp',[]);
    app.controller('myCtrl',function($scope){
        $scope.name = 'google';
    })
</script>

这里写图片描述

ng-repeat 指令会重复一个 HTML 元素

<li ng-repeat="x in names">{{x}}</li>

 $scope.names = ['a','b','c']

自定义指令
.directive 函数来添加自定义的指令

要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive
你可以通过元素名、属性、类名、注释（E,A,C,M）方式来调用指令：

<div my-zhi-lin></div>
        <div class="my-zhi-lin"></div>
        <my-zhi-lin></my-zhi-lin>

app.directive('myZhiLin',function(){
        return{
            //restrict : 'E',
            template : '<h1>这是我自定义的指令哈哈哈哈</h1>'
        }
    })

这里写图片描述

Lacy-Gr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular.js学习笔记(一)

前言：之前也断断续续接触了angular的相关内容，也没有加以实施运用。AngularJS 使得开发现单一页面应用程序变得更加容易。今天刚好做完了一个angular小demo，借此把之前的学习笔记整合了一下。指令ng-app 指令定义一个 AngularJS 应用程序。 ng-model 指令把元素值绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。<body ng-a
复制链接

扫一扫