Angular.js -- 基础（3）

Lazy_Life

于 2018-07-30 09:42:12 发布

阅读量239

点赞数

分类专栏： Angular.js 和 Angular2..

本文链接：https://blog.csdn.net/lazy_life/article/details/81190204

版权

Angular.js 和 Angular2.. 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.Angular.js 中的单页面：

（1）单页面：英文（SPA）,就是单页面应用程序，利用 a 链接中的 # 锚点链接，在一个页面中，实现对其他页面的跳转；

（2）在原生的 js 中，实现单页面得需要利用 ajax 和服务器的搭建，利用服务器传到 ajax 中的值来操作其他页面的跳转；

2.实现 Angular.js 中单页面的步骤：

（1）通过 bower 下载导入 angular；

（2）通过 bower 下载导入 angular-route；（这是一个模块）

注：导入之后，此时的页面已经成了 SPA 应用程序，习惯会将 ng-app 这个指令放在<html>标签中；

（3）Angular.js 实现单页面最好要在服务器中跑；

<style>
    .nav li{
        list-style: none;
        float: left;
        margin-left: 20px; 
    }
</style>
<body>
    <div ng-controller="Demo">
        //由于angular版本的问题，SPA的实现放在版本较新的浏览器中会出现错误；有两种解决方法；
        //第一种方法：（不需要改动下面的script代码，但是不推荐使用）
        <!-- <ul>
            <li><a href="#!/first">展示1</a></li>
            <li><a href="#!/two">展示2</a></li>
            <li><a href="#!/three">展示3</a></li>
        </ul> -->
        //第二种方法：（需要在下面的script代码中进行添加hashPrefix()这个方法）
        <ul class="nav">
            <li><a href="#/first">展示1</a></li>
            <li><a href="#/two">展示2</a></li>
            <li><a href="#/three">展示3</a></li>
        </ul>
        <br><br>
        <div ng-view>
            //这个是内容展示区（ng-view 必须要加）		
        </div>
    <div>
    <script src="引入的angular"></script>
    <script src="引入的angular-route"></script>
    <script>
        //创建模块
        var App = angular.module("App",['ngRoute']);      //[]中放的是需要用到的模块
        //配置路由
        App.config(['$routeProvider','$locationProvider',function($routeProider,$locationProvider){
            $locationProvider.hashPrefix('');      //需要改动的代码
            $routeProvider.when('/first',{         //这是需要跳转的页面
                template : '<h1>这个是首页</h1>',
            })
            .when('/two',{
                template : '<h1>这个是话题</h1>',
            })
            .when('/three',{
                templateUrl : './10-1.html',      //路径名必须要写全
                controller : 'dataController',    //自己定义的控制器名字
            })
            .otherwise({       //这是默认的页面
                redirectTo : '/first'
            })
            //重点：四个属性：
            // （1）template：字符串形式的视图；
            // （2）templateUrl：外部引入形式的视图；
            // （3）controller：控制器，一个视图模板可以对应一个控制器；
            // （4）redirectTo：跳到其他路由；
        }])
        //定义控制器
        App.controller('DemoController',['$scope',function($scope){
            // 写的一切数据都是来源于后端
        }])
        App.controller('dataController',['$scope',function($scope){
            $scope.item = ["html","js","css"]
        }])
    </script>
</body>

下面是 ./10-1.html 的代码：

<h1>这个是联系我们</h1>
<h2>hello</h2>
<ul>
    <li ng-repeat="key in item">{{key}}</li>
</ul>

3.Angular.js 自定义服务：

（1）Angular.js 中原生的服务有很多种，$location，$http，$timeout，$animate 。。。

（2）Angular.js 中自定义服务有三种：factory，service，value；

factory：

<body ng-app="App">
    <div ng-controller="Demo">
        <h1>{{str}}</h1>
    </div>
    <script>
        var App = angular.module("App",[]);
        //将自定义的服务写到控制器中；
        App.controller("Demo",["$scope","server",function($scope,server){
            //（1）
            console.log(server);                //输出hello world
            //（2）
            console.log(server.res);            //输出123
            //（3）
            var data = "你好";
            console.log(server.res(data));      //输出123你好   
            $scope.str = server.res(data);  
        }])
        //自定义服务
        App.factory("server",[function(){    //第一个参数就是自定义的服务，第二个参数可以加入原生的依赖服务，或者自定义的
            //自定义服务可以依赖原生的服务，也可以依赖自定义的
            //return的值就是控制器中的server；return的值可以是任何东西（只能有一个return）
            //（1）
            return "hello world";
            //（2）
            return{
               res : "123", 
            }
            //（3）
            return{                
                res : fun,
            }
            function fun(num){
                var a = "123";
                return a + num
            }
        }])
    </script>
</body>

service：和 factory 是一样的，只是写法不一样；

<body ng-app="App">
    <div ng-controller="Demo">
        <h1>{{str}}</h1>
    </div>
    <script>
        var App = angular.module("App",[]);
        //将自定义的服务写到控制器中；
        App.controller("Demo",["$scope","server",function($scope,server){
            //（1）
            console.log(server.str)               //javascript 
            //（2）
            server.sayHello();                    //hello
            //（3）
            var data = 11.11;
            console.log(server.money(data));      //$11.11
            $scope.str = server.money(data)
            //（4）
            console.log(server.timer())           //输出当前时间
        }])
        //自定义服务
        App.service("server",["$filter",function($filter){   
            // 只是将factory中的return换成了this（这个this可以多写） 
            //（1）
            this.str = "javascript"  
            //（2）
            this.sayHello = function(){
                console.log("hello")
            }
            //（3）
            var price = $filter('currency');
            this.money = function(data){
                return price(data,'$')
            }
            //（4）
            var now = new Date();
            var time = $filter('date');
            this.timer = function(){
                return time(now,'yyyy-MM-dd hh:mm:ss')
            }
        }])
    </script>
</body>

value：，就是相当于定义一个常量（不推荐使用）

<body ng-app="App">
    <div ng-controller="Demo">
        <h1>{{str}}{{uu}}</h1>
    </div>
    <script>
        var App = angular.module("App",[]);
        //将自定义的服务写到控制器中；
        App.controller("Demo",["$scope","author","arg",function($scope,author,arg){
            console.log(author)          //jack
            $scope.str = author;
            $scope.uu = arg.say();       //hello
        }])
        //自定义服务
        App.value("author","jack")    
        App.value("arg",{
            "uname" : "mack",
            "age" : 22, 
            "say" : function(){
                return "hello"
            }
        })

    </script>
</body>

4.当 Angular.js 和 jQuery 冲突的解决：

使用 Angular.js 中自带的方法可以转换成 jQuery 对象（element方法）；

//例：
box = angular.element(box);

Lazy_Life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular.js -- 基础（3）

1.Angular.js 中的单页面：（1）单页面：英文（SPA）,就是单页面应用程序，利用 a 链接中的 # 锚点链接，在一个页面中，实现对其他页面的跳转；（2）在原生的 js 中，实现单页面得需要利用 ajax 和服务器的搭建，利用服务器传到 ajax 中的值来操作其他页面的跳转；2.实现 Angular.js 中单页面的步骤：（1）通过 bower 下载导入 angular；...
复制链接

扫一扫