迈向angularjs2系列(2):angular2指令详解 angularjs常用指令

   2023-03-08 学习力0
核心提示:目录1.hello world!2.配置开发环境源代码下载链接: https://pan.baidu.com/s/1i5pGloT 密码: g7ub注意:这一小节的内容,并非生产环境的做法,读者可以不必操作,看演示就好了。为了简单快速的运行ng2程序,那么引入直接angular2版本和页面的基本框架。index.h

目录

1.hello world!

2.配置开发环境

源代码下载

链接: https://pan.baidu.com/s/1i5pGloT 密码: g7ub

注意:这一小节的内容,并非生产环境的做法,读者可以不必操作,看演示就好了。

为了简单快速的运行ng2程序,那么引入直接angular2版本和页面的基本框架。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <app></app>
     <!--使用app组件-->
     <script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.min.js">

     </script>
     <script src="https://code.angularjs.org/2.0.0-beta.9/Rx.umd.min.js">

     </script>
     <script src="https://code.angularjs.org/2.0.0-beta.9/angular2-all.umd.min.js">

     </script>
     <script src="./app.js"></script>

</body>
</html>

app.js:

var App=ng.core.Component({
    //定义了名称为App的组件。
    selector:"app",
    //匹配所有的app标签
    template:"<h1>hello  {{target}}</h1>"
})
.Class({
    //Class函数传递了一个对象字面量,只有constuctor方法
    constructor:function(){
        this.target="world";
    }
});
ng.platform.browser.bootstrap(App);
//ng.platform.browser是命名空间

直接打开index.html,那么html显示为:

迈向angularjs2系列(2):angular2指令详解

结论:并没有用到typescript,所以它不是必须的,但ng2强烈推荐使用。

二: 配置开发环境和angular2的typescript实现

1.通过git克隆项目

step1:安装git

到网站下载exe文件,https://github.com/git-for-windows/git/releases/download/v2.13.2.windows.1/Git-2.13.2-64-bit.exe。安装的过程我只是改了一下安装目录。

安装目录:

迈向angularjs2系列(2):angular2指令详解

检测git是否安装正确:

首先在开始菜单里找到git cmd(也可以吧快捷方式发送到桌面),然后输出命令git --version。

迈向angularjs2系列(2):angular2指令详解

step2:进入自己的项目目录,运行命令 git clone https://github.com/mgechev/switching-to-angular2.git 。

迈向angularjs2系列(2):angular2指令详解

迈向angularjs2系列(2):angular2指令详解

已经克隆下来。good!

step3:进入项目目录,模块安装,然后启动Server。

$ npm install ;
$ npm start;//启动server

浏览器显示结果为:

迈向angularjs2系列(2):angular2指令详解

success

step4:上手试玩(optional)

内容替换,switching-to-angular2/app/ch4/ts/hello-world/app.ts:

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
  selector: 'app',
  templateUrl: './app.html'
})
class App {
  target:string;
  constructor() {
    this.target = 'world';
  }
}

bootstrap(App);

浏览器显示结果为:

迈向angularjs2系列(2):angular2指令详解

2.hello-world深度解析

注意:代码位于switching-to-angular2/app/ch4/ts/hello-world目录)

首先,看一下一共有4个文件。

迈向angularjs2系列(2):angular2指令详解

index.html负责hello-world的首页(默认)文件的显示,app.html负责app模板的内容,meta.json是一些元信息,app.ts负责js代码逻辑。

接下来详细看index.html。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><%= TITLE %></title>
  <!--TITLE变量注入-->
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- inject:css -->
  <!-- endinject -->
</head>
<body>

  <app>Loading...</app>
  <!--app组件-->
  <!-- inject:js -->
  <!-- endinject -->
  <%= INIT %>
  <!--INIT是变量注入-->
</body>
</html>

app标签有文本内容,"Loading"一直处于可见状态,直到应用启动好、主组件渲染完毕为止。而 <%= TITLE %> 和 <%= INIT %> 是用来注入变量的。这些变量是在哪里定义的呢?

 ,传授一个全局搜索文本的方法:

step1:文件目录右键,选择find in path

迈向angularjs2系列(2):angular2指令详解

step2:搜索"TITLE"。

迈向angularjs2系列(2):angular2指令详解

所以,它的定义在switching-to-angular2/tools/tasks的build.index.ts文件中。

build.index.ts:

import {join, sep} from 'path';
import {APP_SRC, APP_DEST, DEPENDENCIES, SYSTEM_CONFIG, ENV} from '../config';
import {transformPath, templateLocals} from '../utils';

export = function buildIndexDev(gulp, plugins) {
  return function () {
    return gulp.src(join(APP_SRC, '**', 'index.html'))
      // NOTE: There might be a way to pipe in loop.
      .pipe(inject())
      .pipe(plugins.template(
        require('merge')(templateLocals(), {
          TITLE: 'Switching to Angular 2',
          INIT: `
<script>
  System.config(${JSON.stringify(SYSTEM_CONFIG)});
  System.import("./app")
    .catch(function () {
      console.log("Report this error to https://github.com/mgechev/switching-to-angular2/issues", e);
    });
</script>`
        })
      ))
      .pipe(gulp.dest(APP_DEST));
  };


  function inject() {
    return plugins.inject(gulp.src(getInjectablesDependenciesRef(), { read: false }), {
      transform: transformPath(plugins, 'dev')
    });
  }

  function getInjectablesDependenciesRef() {
    let shims = DEPENDENCIES.filter(dep => dep['inject'] && dep['inject'] === 'shims');
    let libs = DEPENDENCIES.filter(dep => dep['inject'] && dep['inject'] === 'libs');
    let all = DEPENDENCIES.filter(dep => dep['inject'] && dep['inject'] === true);
    return shims.concat(libs).concat(all).map(mapPath);
  }

  function mapPath(dep) {
    let prodPath = join(dep.dest, dep.src.split(sep).pop());
    return ('prod' === ENV ? prodPath : dep.src );
  }
};
build.index.ts
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Angular.js的作用域和数据绑定
    初识Angular.js通过初识Angular.js可以做一个简单的入门,下面开始做深入的了解吧。作用域作用域($scope)和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。 作用域是视图和控制器
    03-16
  • Angular 4 设置组件样式的几种方式
    Angular 4 设置组件样式的几种方式
      你用Angular吗?一.介绍  如何只改动最简单的css代码,呈现完全不一样的视图效果。第一种:最基本的设置:  图1 代码 图2 界面运行效果图平常,想给一个label或者p等标签添加样式,我们就是这样操作,在Angular中也是一样的。现在,如果我想要将字体换
    03-16
  • angularJSapi学习-angular.copy使用
    angular.copy使用效果:初始状态:输入信息后未保存状态:点击save后状态:当输入框内容和master内容不一致时:点击reset使得user的信息被重置为master中信息: 具体代码: 1 !DOCTYPE HTML 2 html ng-app="app" 3 headscript src="./angular.min.js"/script
    03-16
  • Ionic启动时提示:The Angular CLI requires a minimum Node.js version of eithor v10.13 or v12.0
    Ionic启动时提示:The Angular CLI requires a m
    在新建ionic项目后通过ionic serve 启动ionic项目时提示:The Angular CLI requires a minimum Node.js version of eithor v10.13 or v12.0  注:博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与
    03-16
  • Angular.js之内置过滤器学习笔记 javascript过
    !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleangularFilter/titlescript src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"/script/head  body ng-app="angularJS" ng-controller="ctrl"    div{{
    03-08
  • Angular 隨記
    Windows下更新Node 和NPM方法管理員模式打開powershell執行以下命令:Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Forcenpm install -g npm-windows-upgradenpm-windows-upgrade
    03-08
  • 双向数据绑定(angular,vue) 双向数据绑定指令
    最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue.angular众所周知是使用的脏检查($dirty)。一开始大家会认为angular开启了类似setInterval去不停的循环检查,性能极差,但其实并不是,$dirty是在一定条件下才会去执行,比如输入框
    03-08
  • 六、angular 生成二维码
    六、angular 生成二维码
    首先需要安装angular-qrcode :bower install monospaced/angular-qrcodenpm install angular-qrcode如何使用?在相应的需要使用二维码的页面增加如下代码:注意:这里的“version”和"size"可以根据github上面找出自己想要的结果:生成含有图片的二维码:这里
    03-08
  • angular.js简单入门。 angular入门教程
    angular.js简单入门。 angular入门教程
    小弟刚接触angular js  就写了一个简单的入门。后续慢慢补。。。首先看 html 页面。htmlmeta charset="UTF-8"headtitleangularJS/title/headscript type="text/javascript" src="./js/angular.min.js"/script      //引入 angularJSscript type="text/
    03-08
点击排行