AngularJS快速入门--博客园老牛大讲堂

本片博客只适合入门者!--博客园老牛大讲堂


如果想认真学习angular,就先看完菜鸟教程

1、什么是angular?

  推荐个:什么是angular  

  个人理解:前端页面由两类组成:页面+数据处理。angualr其实就是处理前端数据的地方(数据处理),类似于javascript、jq。

2、为什么学习angular?---博客园老牛大讲堂

  推荐个:AngularJS 在实际应用中有哪些优缺点?

  个人理解:方便呗!还能咋滴。处理数据方便,关键是具有数据双向绑定的功能(当后端数据发生改变,那么前端数据就会改变)。

3、怎么学习angular?-----博客园老牛大讲堂

   要学会angular必须学angular的常用组件:factory,controller(控制),service,direction(指令),等等。组件比较多,我只介绍列出的几种。angular组建

  推荐个:常用的组件和介绍   组件入门

  例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../js/angular.min.js" ></script>
        
    </head>
    <body ng-app="myapp" ng-controller="myCon">
        
        <mydir></mydir>
        
        <div>{{hex}}</div>
        
        <div>{{k.id}}</div>
        
        <div>{{name}}</div>
        
        <script>
            var app=angular.module("myapp",[]);
            
            //工厂---这里支持跨域请求 ---来自  博客园老牛大讲堂
            app.factory("myFac",function($http){
                function tongxin(){//这个方法会返回一个对象
                    return $http({
                        method:"post",
                        url:"http://127.0.0.1:8080/A/B",
                        data:{id:"1",name:"博客园老牛大讲堂"},
                        headers:{"Content-Type":"application/x-www-form-urlencoded"},
                        transformRequest:function(obj){
                            var str=[];
                            for(var p in obj){
                                str.push(encodeURIComponent(p)+"="+encodeURIComponent(obj[p]));
                            }
                            return str.join("&");
                        },
                        responseType:"text"
                    });
                }
                return{
                    getter:tongxin//返回这个方法
                };
            });
            
            //指令---来自  博客园老牛大讲堂
            app.directive("mydir",function(){//这里菜鸟有介绍
                return {
                    restrict:"AE",
                    replace:true,
                    template:
                        '<div>这里是博客园老牛大讲堂</div>',
                    link:function(scope,elem,attr){
                        console.log("这里是处理相关的按钮,事件操作的");
                    }
                }
            });
            
            
            //创建服务----单例模式,只进行一次new
            app.service("myser",function(){
                
                this.firstServer=function(){
                    return "第一个服务";
                }
                this.erServer=function(){
                    return "第二个服务";
                }
            });
            
            
            //一些值,值可以进行改变---来自  博客园老牛大讲堂
            app.value("myVal",{
                id:1,
                name:"名字"
            });
            
            //provider提供
            app.provider("myPro",function(){
                
                var f=function(name){
                    return "你好"+name;
                };
                this.$get=function(){//必须有
                    return f;
                };
            });
            
            //控制器---来自  博客园老牛大讲堂   
        
      // 
app.controller("myCon",function($scope,myFac,myser,myVal,myPro){//引入各个模块 //controller调用factory方法 myFac.getter().success(function(data){ console.log(data);//输出数据 }); //controller调用Server方法 $scope.hex = myser.firstServer(); //controller调用value里面的信息 $scope.k=myVal; //controller调用provider方法 $scope.name=myPro("张三"); }); </script> </body> </html>

 4、深入学习

  如果你上面的链接以及东西都明白了,那么你已经入门了!现在就需要了解一下实际开发中各个模块是怎么协调开发的。

  流程:1、首先编写静态页面。

     2、当遇到需要改变的数据。需要修改成符合angualrJS的。

     3、后端的查询流程:点击鼠标触发direction(指令)里面的link里面的方法。在link里面编写方法,调用facotry里面Htpp跨域请求。并为controller赋值。

     4、显示出结果。 

  例子:下面的例子就是一个简单页面的内容

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../js/angular.min.js"></script>
    </head>

    <body ng-app="myApp" ng-controller="myCon">
        <table >
            <a href="http://www.cnblogs.com/laonniudajiangtang/"><h1>博客园老牛大讲堂</h1></a>
            <tr>
                <td>id</td>
                <td>&nbsp;&nbsp;内容glary</td>
                <td>&nbsp;&nbsp;内容mark</td>
                <td>&nbsp;&nbsp;内容name</td>
                <td>&nbsp;&nbsp;内容sex</td>
            </tr>
            <tr ng-repeat="x in data">
                <td>{{x.id}}</td>
                <td>{{x.glary}}</td>
                <td>{{x.mark}}</td>
                <td>{{x.name}}</td>
                <td>{{x.sex}}</td>
            </tr>
        </table>
        <my-dir></my-dir>
        <script>
            var app = angular.module("myApp", []);
            
            //控制层--博客园老牛大讲堂
            app.controller("myCon", function($scope, myFac) {

                $scope.data = myFac.getmodo();
                console.log(myFac.getmodo());
            });
            
            //命令层--模仿的就是从后台获取数据----博客园老牛大讲堂
            app.directive("myDir", function() {

                return {
                    restrict: "AE",
                    replace: true,
                    template: '<button ng-click="dianji()">点击</button>',
                    link: function(scope, elem, attr) {
                        scope.dianji=function(){//重新为data数据赋值,因为是双向绑定,所以当为data赋值,页面内容就会发生变化。
                            scope.data = [{
                                "glary": "a",
                                "id": 1,
                                "mark": "a",
                                "name": "a",
                                "sex": "a"
                            }, {
                                "glary": "b",
                                "id": 2,
                                "mark": "b",
                                "name": "b",
                                "sex": "b"
                            }];
                        }
                    }
                }
            });
            
            //工厂层   主要是为了编写初始数据----博客园老牛大讲堂
            app.factory("myFac", function() {

                function getmodo() {//为初始页面进行赋值,方便页面的测试

                    return [{
                        "glary": "a",
                        "id": 1,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "v",
                        "id": 2,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "s",
                        "id": 3,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "df",
                        "id": 4,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "h",
                        "id": 5,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "k",
                        "id": 6,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "v",
                        "id": 7,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "x",
                        "id": 8,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "n",
                        "id": 9,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "m",
                        "id": 10,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }];
                }

                return {
                    getmodo: getmodo
                };
            });
        </script>
    </body>

</html>

 

 

  

  

posted @ 2017-02-23 10:45 老牛大讲堂 阅读(...) 评论(...) 编辑 收藏