【angular+webpack（二）】的更多相关文章

angular+webpack（二）

上篇文章Angular2开发基础之TSC编译 解决如何使用TSC来编译ng2项目,以及如何解决出现的error.这些点是新手容易忽视的内容, 要熟悉ng开发的工具链,还是需要掌握其中的重点.本篇文章是它的姊妹篇,小目标是: package.json加入script webpack.config.js webpack配置完成 app.bundle.js webpack-dev-server完整代码 -> 传送门 环境 需要说明,本教程仅是Windows的实操,Linux,Mac环境,会有不同. W…

angular服务二

angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body ng-app="myApp"> <div ng-contro…

Angular基础(二) 组件的使用

​ 一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/cli@1.0.0安装CLI,为CLI的位置设置环境变量,然后就可以全局使用ng命令了. 执行ng new –ng4 angular-hello-world可以创建Angular4项目,会自动生成基础的文件夹和文件,还会自动进行npm i操作,下载并安装所需的依赖. 然后执行ng serve就可以编译并启动这个程序了,但ng并不会自动打开浏览器. b) 创建一个组件…

webpack(二） 根据模板生成简单的html文件

(一)使用webpack 根据模板生成HTML,首先需要安装插件 html-webpack-plugin. 在工程文件夹安装插件 命令如下: npm install html-webpack-plugin --save-dev (二) 新建 webpack.config.js,名称可以更改,更改后 运行时,需指定 配置文件名称. 例如,配置文件名为 my.webpack.config.js, 则需要在package.json 文件中,在scripts 处添加如下代码: "scripts"…

六、angular 生成二维码

首先需要安装angular-qrcode : bower install monospaced/angular-qrcode npm install angular-qrcode 如何使用? 在相应的需要使用二维码的页面增加如下代码: 注意:这里的“version”和"size"可以根据github上面找出自己想要的结果: 生成含有图片的二维码: 这里没有angular插件方法,需要引入juquery的一个插件,插件在<我上传的文件>中:jquery.qrcode.min.…

Angular（二）

Angular开发者指南(二)概念概述   template(模板):带有附加标记的模板HTMLdirectives(指令):使用自定义属性和元素扩展HTMLmodel(模型):用户在视图中显示的数据,并与用户进行交互scope(作用域):存储模型的上下文,以便控制器,指令和表达式可以访问它expressions(表达式):访问范围中的变量和函数compiler(编译器):解析模板并实例化指令和表达式filter(过滤器):格式化表达式的值以显示给用户view(视图):用户看到的内容(DOM)D…

angular学习(二):Controller定义总结

上文中总结完了ng-view的应用,将运维后台分开界面到2个,进行到 逻辑Controller处理中,本文将总结一下在项目中Controller都用到了哪些知识: $scope:作用域对象,仅仅是代表本Controller对象,本作用域的不论什么对象都用$scope来声明. $rootScope:代表整个页面作用域,能够在随意子$scope之间传递全局对象 $http:用来发送http请求的对象. 设置header var module =angular.module('index'); //设…

Angular生成二维码

Installation - Angular 5+, Ionic NPM npm install angularx-qrcode --save Yarn yarn add angularx-qrcode Installation - Angular 4 NPM npm install angularx-qrcode@1.0.2 --save Yarn yarn add angularx-qrcode@1.0.2 Basic Usage Import the module and add it t…

从flask视角理解angular（二）Blueprint VS Component

Component类似flask app下面的每个blueprint. import 'rxjs/add/operator/switchMap'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, ParamMap } from '@angular/router'; import { Location } from '@angular/common'; import { Hero } from…

Angular总结二：Angular 启动过程

要弄清楚 Angular 的启动过程,就要弄明白 Angular 启动时加载了哪个页面,加载了哪些脚本,这些脚本做了哪些事? 通过 Angular 的编译依赖文件 .angular-cli.json 可以看到 apps 这个对象类的数组 这个对象中有 root 这个属性,这个是 Angular 应用的根目录,也即是 src 目录是 Angular 应用的根目录. 这个对象中有 index 这个属性,这个是 Angular 启动时加载的页面,也即是 src 目录下的 index.html 是 An…