angular1基础

最新推荐文章于 2022-03-29 08:55:10 发布
最新推荐文章于 2022-03-29 08:55:10 发布
阅读量2.8k 收藏
点赞数 1
分类专栏： 1 WEB前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingov/article/details/73368655
版权

自定义指令directive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'> 

<!-- directive:myTest -->
<div class="my-test"></div>
<div class="myTest"></div>
<div my-test></div>
<my-test></my-test>


<script src="./angular.min.js"></script>
<script>
    var app = angular.module('myapp',[]);

    app.controller('myctl',['$scope',function($scope){

    }]);

    app.directive('myTest' , function(){
        return {
            restrict:'ECMA',  //E:元素 C:类  M:注释  A:属性
            replace:true,  //是否替换原元素
            template:'<h1>文字</h1>'    //模版要求只能有一个根元素
            // templateUrl:'./url.html'  //也可引入外部html文件
        }
    })



</script>
</body>
</html>

这里写图片描述

作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app='myapp' ng-controller='myctl' ng-init="nme='tim'"> 
    <h1>myctl {{nme}}</h1>

<div class="two" ng-controller='two'>
    <h2>two {{nme}}</h2>
    <div class="three" ng-controller='three'>
        <h3>three {{nme}}</h3>
    </div>
</div>

<script src="./angular.min.js"></script>
<script>
    var app = angular.module('myapp',[]);

    app.controller('myctl',['$scope',function($scope){
        // $scope.nme = 'tom'

    }])
    app.controller('two',['$scope',function($scope){
        // $scope.nme = 'jack'
    }])
    app.controller('three',['$scope',function($scope){

    }])

</script>
</body>
</html>

这里写图片描述

松开26行注释

    app.controller('two',['$scope',function($scope){
        $scope.nme = 'jack'
    }])

这里写图片描述

自定义过滤器

能将一个单词的任意字母变为大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'> 

<div>{{ 'testing' | toBig : 5 }}</div>

<script src="./angular.min.js"></script>
<script>
    var app = angular.module('myapp',[]);

    app.controller('myctl',['$scope',function($scope){

    }]);

    app.filter( 'toBig' , function(){
        return function( word , b ){
            var word2 = word.split('')
            word2.splice( b , 1 , word.charAt(b).toUpperCase() )
            word2.join('')
            return word2.join('') ;
        }
    })


</script>
</body>
</html>

这里写图片描述

传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'> 

<div>{{ 'testing' | fn : 'a' : 'b' : 'c' }}</div>

<script src="./angular.min.js"></script>
<script>
    var app = angular.module('myapp',[]);

    app.controller('myctl',['$scope',function($scope){

    }]);

    app.filter( 'fn' , function(){
        return function( word , one , two , three ){
            console.log( word , one , two , three )
            return word ;
        }
    })

</script>
</body>
</html>

这里写图片描述

服务

http服务

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'> 

<h1>{{ name }}</h1>
<h1>{{ address }}</h1>

<script src="./angular.min.js"></script>
<script>
    var app = angular.module('myapp',[]);

    app.controller('myctl',['$scope','$http',function(scope,http){
        http({
            url:'./data.php',
            method:'post',
        }).success(function(dt){
            scope.name = dt.name ;
            scope.address = dt.addr ;
        })
    }]);    


</script>
</body>
</html>

data.php

<?php 
    echo '{"name":"tom","addr":"usa"}';
?>

这里写图片描述

http的请求头
  • headers:{‘Content-Type’:’application/json’}
app.controller('myctl',['$scope','$http',function(scope,http){
    http({
        url:'./data.php',
        method:'post',
        headers:{'Content-Type':'application/json'},
        data:{sum:100,ctg:'physic'},
    }).success(function(dt){
        console.log(dt)
    })
}]);

这里写图片描述

  • headers:{‘Content-Type’:’application/x-www-form-urlencoded’}
app.controller('myctl',['$scope','$http',function(scope,http){
    http({
        url:'./data.php',
        method:'post',
        headers:{'Content-Type':'application/x-www-form-urlencoded'},
        data:'sum=100&ctg=physic',
    }).success(function(dt){
        console.log(dt)
    })
}]);

这里写图片描述

get请求

get请求，传参应该用params , 这样的话ng会自动将参数拼接到地址后面
data传参是给post用的

app.controller('myctl',['$scope','$http',function(scope,http){
    http({
        url:'./data.php',
        method:'get',
        params:{name:'tom',age:18},
    }).success(function(dt){
        console.log(dt)
    })
}]);

这里写图片描述

JSONP
app.controller('myctl',['$scope','$http',function(scope,http){
    http({
        url:'./data.php',
        method:'jsonp',
        params:{
            callback:'JSON_CALLBACK'
        },
    }).success(function(dt){
        console.log(dt)
    })
}]);

data.php

<?php 

$fn = $_GET['callback'];

echo $fn.'({"name":"tom","addr":"usa"})';

 ?>

这里写图片描述

location

location.search()   angular认为第一个#后面的？才是请求参数 location.search()   angular认为第一个#后面的？才是请求参数 location.hash() angular认为第一个#不是锚点，后面再次出现的#才是锚点
$location.path() angular认为第一个#开始后面属于path

这里写图片描述

$interval $timeout

app.controller('myctl',['$scope','$interval','$timeout',function(scope , interval , timeout ){

    var address = 0 ;
    var t1 = interval( function(){
        console.log( address++ )
        if( address > 30 ){
            interval.cancel(t1) 
        }
    }, 100 );

}]);

timeout

app.controller('myctl',['$scope','$interval','$timeout',function(scope , interval , timeout ){

    var t2 = timeout(function(){
        console.log(9999)
    },2000);

    scope.btn = function(){
        timeout.cancel(t2)
    }

}]);

控制器里使用服务

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'> 

<h1>{{ nowtime }}</h1>

<script src="./angular.min.js"></script>
<script>
    var app = angular.module('myapp',[]);

    app.controller('myctl',['$scope','$filter',function(scope,filter){
        var now = new Date ;
        var date = filter('date');
        var now1 = date( now , 'yyyy-MM-dd');
        scope.nowtime = now1;
    }]);    

</script>

</body>
</html>

自定义服务的两种方式

    // 使用自定义服务
    app.controller('myctl',['$scope','myservice',function(scope,ms){
        ms.say('google')
    }]);    


    //使用factory自定义的服务
    app.factory( 'myservice' , ['$log' , function(log){
        return {
            say:function(word){
                log.log('hello '+word)
            }
        }
    }])


    //使用service自定义服务
    app.service('myservice' , ['$log' , function(log){
        this.say = function(word){
            log.log('你好,'+word )
        }
    }])

这里写图片描述

app.value

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

// 使用自定义服务
app.controller('myctl',['$scope','pi','version','$log',function(scope,p,v,log){
    log.log(p);
    log.log(v);
}]);    

// 定义常量
app.value('pi',3.1415926);
app.value('version','1.0.0');

config配置

为angular新增一个过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'> 

<h1>{{ 8 | test_filter }}</h1>

<script src="./angular.min.js"></script>
<script>
    var app = angular.module('myapp',[]);

    app.config(['$logProvider','$filterProvider',function($logProvider,$filterProvider){
        //新增一个过滤器
        $filterProvider.register('test_filter',function(){
            return function(arg){
                return arg*arg ;
            }
        })
    }])

</script>

</body>
</html>

这里写图片描述

app.run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app='myapp' ng-controller='myctl'> 

<h1>{{ addr }}</h1>

<script src="./angular.min.js"></script>
<script>
    var app = angular.module('myapp',[]);

    app.controller('myctl',function(){})

    // 可以直接运行$http服务
    app.run(['$rootScope','$http',function($rootScope,$http){
        $rootScope.addr = 'UN'
        $http({
            url:'./data.php',
            method:'get',
        }).success(function(dt){
            console.log(dt)
        })
    }])

</script>

</body>
</html>

这里写图片描述

angular模块拆分到不同文件

目录结构

这里写图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app='myapp'> 

<div ng-controller='controller1'>
    <input type="text" ng-model='data1'>
    <input type="text" ng-model='data1'>
</div>

<div ng-controller='controller2'>
    <input type="text" ng-model='data2'>
    <input type="text" ng-model='data2'>
</div>

<script src="../angular.min.js"></script>
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js

(function(){
    angular.module('myapp',['module1','module2'])
})()

module1.js

(function(){
    angular.module( 'module1' , [])
        .controller('controller1' , function($scope){
            $scope.data1 = 100 ;
        })
})()

module2.js

(function(){
    angular.module( 'module2' , [])
        .controller('controller2' , function($scope){
            $scope.data2 = 200 ;
        })
})()

这里写图片描述

kingov
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Angular1】基础使用及各类方法
ASW262623的博客
07-28 858
scope的使用贯穿了Augular应用$scope与数据模型相关联，同时也是表达式执行的上下文的**“交通工具”**scope在∗∗视图层∗∗(View)和控制层(Controller)之间建立了通道，而基于作用域视图在我们修改了∗∗数据(ng−model所绑定的数据)∗∗之后会立即更新scope在∗∗视图层∗∗(View)和控制层(Controller)...
纯angular1.x 前端框架
03-10
使用angular1.x 做的web端的单页面前端框架，使用wampserver可运行查看。主要用了$state模块。
Angular1
MrWiley的博客
06-19 708
Angular1 是如何渲染页面的
angular1.x.js权威教程
04-14
关于angular1.x的详细用法,内容中详细涉及到angular的mvc,依赖注入,双向数据绑定,指令这四大核心概念
angular1 demo
09-07
资源里面是我的github地址，请根据说明下载源码
Angular入门基础1
08-08
Angular入门基础1主要介绍了AngularJs的基本概念、优势以及版本之间的差异，并通过实例展示了如何创建一个Angular4应用。AngularJs是一个JavaScript框架，由谷歌公司于2009年发布，主要用于构建Web、Mobile和Desktop...
Angular学习1
08-08
**Angular学习1** Angular是一个流行的前端开发框架，用于构建高效、可维护的Web应用程序。它由Google维护，基于TypeScript语言，提供了丰富的功能和组件，包括数据绑定、依赖注入、指令、服务等。 ### 1. 搭建...
angular基础知识解析.docx
09-28
1. 打开命令行工具，在项目的根目录下运行Angular CLI命令`ng g component 组件名`，例如：`ng g component myComponent`。这将自动创建一个新的组件文件夹，包含组件的TS、HTML、CSS等相关文件。 **数据绑定** ...
Angular1.x安装与配置1
08-03
Angular1.x，作为AngularJS的一个早期版本，是一个由Misko Hevery和Adam Abrons于...其后的版本，如Angular 2+，在很多方面进行了优化和改进，但Angular1.x的许多基础概念和原理仍然对理解现代Angular框架至关重要。
Angular 1.x个人使用的经验小结
08-29
在Angular中，$scope是连接controller和view的桥梁，$scope是实现数据绑定的基础。controller创建方式主要分为静态工厂方法注册和动态注册。 5. Service Service一般是封装通用代码，所谓通用代码一般是跨...
现今最详细的angular开发环境配置全套教程
热门推荐
桂云帆的博客
04-18 3万+
第一步、安装node.js1.需要下载的文件路径：https://nodejs.org/en/download/2.安装nodejs:3.验证node.js4.npm安装以及验证：npm的安装。由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入"npm -v"来测试是否成功安装5.配置npm全局路径存放位置以及cache的路径：例如：我希望将以上两个...
CI框架在Apache服务器下去掉URL中的index.php
群来群往的博客
12-13 2359
第一步：修改Apache 的配置文件，让Apache支持rewrite_module，修改过程如下： 打开apache的配置文件：conf/httpd.conf ： 全局查找LoadModule rewrite_module modules/mod_rewrite.so，把该行前的#去掉。 第二步：在全局搜索 AllowOverride None ，全部（有多个）修改为 Allo
angular2入门（1）-如何启动一个项目
u011747152的博客
10-27 2192
启动angular2项目: 1:前提是你安装了ide,及其上的环境 2:下载一个angular2的源码，导入到ide（本人使用的是webstorm） 中 3:4：然后在命令行中输入npm install,等相关依赖下载完后，再输入npm start 就可以在网站中输入http://localhost:4200 登录了
AngularJS-1.启动流程
风顺水流
09-02 2236
整体结构 bindJQuery publishExternalAPI angularInit 应用启动自动启动 手动启动 细节问题整体结构AngularJS的源码在整体上，与其它很多库和框架一样，是一个自执行函数，其整体结构简化如下：(function(window, document, undefined) { if (window.angular.bootstrap) {//判断是否已经
angularJS 1和2的区别
jacoby_fire的博客
09-07 6980
1.从移动app开发上面分析：Angular 1.x 专注于web开发，没有涉及到移动这方面的内容，还好后来杀出个程咬金IONIC移动app开发框架，让angularjs1.x很好的支持了移动开发Angular 2目标：原生移动支持 – iOS 和 AndroidAngular 2 会有两层，应用层和渲染层。例如一个组件可以用不同的 @View 修饰器修饰，根据运行环境可以在运行时生效。与 Reac
Angular入门教程
pengli
04-20 977
骑士李四记录： 1.Augular介绍： AngularJS 通过指令 ng-directives 扩展了 HTML。
Angular 模块 (NgModule)
Jinmy的博客
07-27 3821
Angular 模块 (NgModule) NgModule 是一个带有 @NgModule 装饰器的类。 Angular 模块把组件、指令和管道打包成内聚的功能块，每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。 NgModule 的元数据会做这些： 声明某些组件、指令和管道属于这个模块。 公开其中的部分组件、指令和管道，以便其它模块中的组件模板中可以使用它们。 ...
angular基础学习
book_longker的专栏
03-29 1516
@[TOC] angular基础教程
(一) Angular1.x 启动分析
weixin_30532837的博客
10-24 204
AngularJS 的源码在整体上，与其它很多库和框架一样，是一个自执行函数，其整体结构简化如下： //匿名自执行函数，保证angular.js加载完成后，立即执行其中的代码。 （function(window,document,undefined){ //判断代码angularjs重复加载 if(window.angular.bootstrap){ consol...
angular学习路线
最新发布
06-09
1. HTML、CSS 和 JavaScript 基础：在学习 Angular 之前，你需要掌握 HTML、CSS 和 JavaScript 的基础知识。这些技术是 Angular 应用的基础。 2. TypeScript 学习：Angular 使用 TypeScript，因此你需要学习它的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值