<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>

    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>

    <!--

    ng-app 边界指令

    {{}}  呈现指令

    ng-model    信息指令  用于信息绑定

    ng-bind 绑定指令

    ng-init 初始化指令  :对边界内数据模型初始化  习惯放在BODY上

    -->

</head>

<body ng-app="myApp">

<ul>

    <li><a href="#!home">首页</a></li>

    <li><a href="#!liebiao">列表页</a></li>

</ul>

<!--显示页 把路由templateUrl 页面中的内容写到该DIV中  并加上控制类-->

<div ng-view>

</div>

<script>

    var app = angular.module('myApp',['ngRoute']);

    //自定义服务

    app.service('hexafy', function() {

        this.myFunc = function (x) {

            return x.toString(16);

        }

    });

    //系统的服务不加$

    // 图片和链接要加ng 指定

    // <img ng-src="{{}}"/><a ng-href="{{}}"></a>

    app.controller('homeCon',function ($scope, $route) {

        //$scope.$route = $route;

        $scope.name = '这是首页';

        $scope.add = function () {

            alert('121212');

        }

    })

        .controller('liebiaoCon',function ($scope, $route, $http,hexafy) {

            //$scope.$route = $route;

            $scope.name = '这是列表页';

            $scope.add = function () {

                alert('121212');

            }

            //发送http服务

            /*$http({

                method: 'GET',

                url: '/someUrl'

            }).then(function successCallback(response) {

                // 请求成功执行代码

            }, function errorCallback(response) {

                // 请求失败执行代码

            });*/

            //POST请求要加headers否则服务器接受不到

            $http({

                method: 'POST',

                url: '/someUrl',

                headers:{

                    "Content-Type":"application/X-www-form-urlencoded"

                },

                data:""//用字符串  不能用{}

            }).then(function successCallback(response) {

                // 请求成功执行代码

            }, function errorCallback(response) {

                // 请求失败执行代码

            });

            //过滤服务{{任意内容 | 过滤器}}

            //自定义过滤服务

            app.filter('reverse', function() { //可以注入依赖

                return function(text) {

                    return text.split("").reverse().join("");

                }

            });

            //过滤筛选服务

           // <li ng-repeat='pname in pnames | filter:filter_input'></li>

            //监听服务  $watch   不需要注入

            //在控制器中可是随时使用

            $scope.InputValue = '';

            $scope.$watch('InputValue',function () {

                //监听InputValue   变化就会触发

            })

        })

        .config(['$routeProvider', function($routeProvider){

        $routeProvider

            .when('/home',{

                templateUrl: 'home.html',

                controller: 'homeCon',

            })

            .when('/liebiao',{

                templateUrl: 'liebiao.html',

                controller: 'liebiaoCon',

            })

            .otherwise({

                redirectTo:'/home'//默认页  只能用CODE

            });

    }]);

</script>

</body>

</html>

angularjs知识点的更多相关文章

  1. Ionic/Angularjs 知识点解析

    Ionic/Angularjs 知识点解析 angular-ui-router(状态跳转) state的定义:(在app.js的config下配置) $stateProvider .state('ap ...

  2. 21、AngularJs知识点总结 part-3

    1.选择框select 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,也可以使用ng-repeat 指令来创建下拉列表: 区别:ng ...

  3. 20、AngularJs知识点总结 part-2

    1.作用域 当你在angularJs中创建控制器时,可以将$scope对象作为一个参数进行传递: scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用 ...

  4. 19、AngularJs知识点总结 part-1

    1.AngularJs AngularJs是一款JavaScript开源库,由Google维护,用来协助单一页面应用程序: AngularJs的目标是通过MVC模式增强基于浏览器的应用,使开发和测试变 ...

  5. AngularJS1.X版本基础

    AngularJS  知识点: DataBinding Providers Validators Directives  Controllers Modules Expressions Factori ...

  6. AngularJS的小知识点

    小知识点:$scope和$rootScope (1)每次使用ngController指令,都会调用控制器的创建函数,创建出一个控制器对象. (2)每次创建一个控制器对象,AngularJS都会创建一个 ...

  7. 100%会用到的angularjs的知识点【新手可mark】

    前言:下面我将整理出100%会到的angularjs的知识点,掌握这些知识点你基本上就可以独立完成一个angularjs的项目,前提是你有一定web开发的经验:1.了解基本的javascript的概念 ...

  8. AngularJS小知识点一

    AngularJS是由谷歌公司及一个由开发者组成的个人社区共同打造.其主要优势在于帮助使用者在web应用程序中实现必要的动态视图.它是通过原生的MVC(模型-视图-控制器)功能来增强HTML. PS: ...

  9. AngularJS应用，常用数组知识点

    AngularJS 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码“:true|false”, ...

随机推荐

  1. 剑指Offer编程题2——替换空格

    剑指Offer编程题2——替换空格 题目描述 请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happ ...

  2. jsonp跨域ajax跨域get方法

    原理: 就是利用<script >标签没有跨域限制的,从而达到与第三方网站通讯的目的.当需要通讯时,本站脚本创建一个<script>标签,src地址指向第三方网站的的一个网址. ...

  3. java类型转换小技巧

    mysql 之排序显示行号 select @r := @r+1 as rownum,birth,cardNo from card,(select @r:=0)torder by birth ASC

  4. python使用stomp连接activemq

    一.安装ActiveMQ服务 1. 当使用windows时,安装参考:https://blog.csdn.net/WuLex/article/details/78323811 启动:运行activem ...

  5. C#+EntityFramework编程方式详细之Code First 数据迁移

    在前几篇的C#+EntityFramework编程方式中介绍了C#+EntityFramework编程方式Code First ,Model First以及Dtatabase First 等编程方式, ...

  6. 动态加载机Servlet容器加载器

    动态加载是Servlet 3.0中的新特性,它可以实现在 不重启Web应用的情况下加载新的Web对象(Servlet. Filter.Listener).Servlet容器加载器也是Servlet 3 ...

  7. Python学习笔记五

    一. 递归 递归函数: def a (): print ("from b") b() def b(): print("from a ") a() a() 递推和 ...

  8. django第三天

    从后台传入一层的字典数据 后台代码 前台代码一 浏览器结果 前台代码二 前台代码三 前台代码四 注意 默认遍历为KEY .values    .keys   .items 都不加括号

  9. Java 模板模式

    定义:定义了一个算法的骨架,并允许子类为一个或多个步骤提供实现 模板方法使得子类可以在不改变算法的结构的情况下,重新定义算法的某些步骤 类型:行为型 一次性实现一个算法的不变的部分,并将可变的行为留给 ...

  10. String Formatting in C#

    原文地址 http://blog.stevex.net/string-formatting-in-csharp/ When I started working with the .NET framew ...