AngularJs的初步使用

最新推荐文章于 2024-07-12 20:49:16 发布

yihec的明天

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量256

点赞数

分类专栏：技术博客文章标签： angularjs html

本文链接：https://blog.csdn.net/qq_26611667/article/details/52172323

版权

技术博客专栏收录该内容

4 篇文章 0 订阅

订阅专栏

    AngularJS[1]  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJs程序分为3部分：模板，表现层逻辑，数据（model）。

 模板：我们用html，css写的ui视图代码，其中包含AngularJs的指令，表达式，并最终会被AngularJs编译机制编译为附加在dom树上。AngularJs的指令（directive）可以由我们自由扩展。

表现层逻辑：包括应用程序逻辑和行为。用javascript定义作为视图控制器逻辑。在AngularJs作为MVC框架，在控制器中我们无需添加对于dom级的事件监听，这些在AngularJs中已经内置了。在ui节点dom事件发生后AngularJs会自动转到scope上的某个行为（Action）逻辑。

 数据：视图对象（viewobject）需要被AngularJs Scope（1.0中作为service出现）引用，可以使任何类型的javascript对象，数组，基本类型，对象。并且AngularJs会自动异步更新模型，即在ui发生改变的时他会自动刷新模型（mode），反之在模型发生改变的时候也会自动刷新ui。在这里我们不需要定义形如getter，setter的一些列方法。

AngularJS 控制器（Controller）
用于控制 AngularJS 应用

// controller的使用
var myApp = angular.module('myApp',[]);
       //这里第一个参数controller的名字，后面的参数是所要依赖的模块
myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

下面是html页面

<!--ng-app指令定义了应用, ng-controller 定义了控制器。
ng-model 指令把输入域的值绑定到应用程序变量 greeting 
-->
<html ng-app="myApp">
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body ng-controller="GreetingController">
        <div ng-model="greeting">
        Hello {{greeting}}!
        </div>
    </body>
</html>

这是运行结果

AngularJs指令
通过内置的指令来为应用添加功能。。

下面的是一些AngularJS的内置指令
这里写图片描述
我这里主要讲怎么去自定义指令

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

restrict 值可以是以下几种:

E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
下面是html代码

<html>
    <head>
    <meta charset="utf-8">
     <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
<body ng-app="myApp">
<my-directive></my-directive>
<div my-directive></div>
<script>
    var app = angular.module("myApp", []);
    app.directive("myDirective", function() {
        return {
            restrict : "EA",
            template : "<h1>hello world!</h1>"
        };
    });
</script>
</html>

结果大家可以去试下，自定义编写指令，主要用于重复的html代码，比如表单啥编写一个指令，然后使用起来方便。

AngularJs 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
使用路由时，需要导入angular-route.js

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body ng-app='routingDemoApp'>

        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/computers">电脑</a></li>
            <li><a href="#/printers">打印机</a></li>
            <li><a href="#/blabla">其他</a></li>
        </ul>

        <div ng-view></div>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
        <script src="angular-route.js"></script>
        <script>
            angular.module('routingDemoApp',['ngRoute'])
            .config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{template:'这是首页页面'})
                .when('/computers',{template:'这是电脑分类页面'})
                .when('/printers',{template:'这是打印机页面'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>


    </body>
</html>

AngularJS 服务(Service)

$http({
url:'data.json',
method:'GET'
}).success(function(data,header,config,status){
//响应成功

}).error(function(data,header,config,status){
//处理响应失败
});

当然我这里只讲了一些最基础的也是最常用的简单例子，大家想要了解还是要去看下视频，因为我是属于后台开发目前设计到一些AngularJs技术，所以说我这篇主要是给自己几天使用AngularJs的一些总结,当然也希望大家能够一起学习交流。

yihec的明天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs的初步使用

AngularJS[1] 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJs程序分为3部分：模板，表现层逻辑，数据（model）。模板：我们用html，css写的ui视图代码
复制链接

扫一扫