入职之后的第一个项目：
第一个技能点：vusual studio前端开发工具+angularjs
（一）vusual studio开发工具
官网下载地址：https://code.visualstudio.com/，下载时选择稳定版stable并安装完成
汉化步骤：选择左侧栏目最下端“插件”，搜索chinese安装之后重新启动就可以了，如下图
Vscode界面介绍（主要分为5个区域，分别是活动栏，侧边栏，编辑栏，面板栏，状态栏）：
描述如下①：活动栏从上到下依次为，打开侧边栏，搜索，使用git，debug，使用插件
②：侧边栏，新建项目文件和文件夹
③：编辑栏，编写代码的区域
④：面板栏，从左到右依次为，问题，输出，调试栏，终端（terminal），最重要的是terminal，用来输入相关命令
没有面板栏的话：查看-->外观-->显示面板
利用vscode自带的git， 手动手写git命令，提交时报错提示：
fatal: not a git repository (or any of the parent directories): .git
原因： 没有本地git资源管理库（没有本地初始化）。
执行命令：git init
vscode运行html文件怎样在浏览器中查看：
依旧点击插件：view-in-browser安装，然后右键点击html文件，选择view-in-***就可以在浏览器中查看了
（二）angularjs
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
官网建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载
控制器属性案例如下，底部有控制器函数案例及区分说明
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效
Scope 概述
AngularJS 应用组成如下：
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{name}}。
根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
基础属性：
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令指明了应用, ng-controller 指明了控制器。
上图为控制器属性案例，下面为控制器函数案例：
<div ng-app="" ng-controller="personController"> 名: <input type="text" ng-model="person.firstName"><br> 姓: <input type="text" ng-model="person.lastName"><br> <br> </div> <script> function personController($scope) { $scope.person = { firstName: "John", lastName: "Doe", } } </script> <script src="//www.runoob.com/try/angularjs/1.2.5/angular.min.js"></script>
区别：
一、jar包不同，控制器函数需要用到angularjs包
二、使用控制器函数，不能有ng-app属性值。
三、控制器函数对象赋值：冒号赋值，逗号隔开。
控制器方法案例，此处直接调用控制器中的fullName属性（方法返回值）：
<div ng-app="myApp" ng-controller="personCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{fullName()}} </div> <script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } }); </script>
模型案例：
双向绑定、表单验证及表单各属性
<!--指明app为angular应用-->
<div ng-app="app">
<!--双向绑定，控制器属性-->
<div ng-controller="control">
姓名：<input ng-model="name" >
<br>
<h1>hello {{name}}</h1>
<h2 ng-bind="name"></h2>
</div>
<!--表单校验-->
<form name="myForm">
email:<input type="email" name="myemail" ng-model="text">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.myemail.$error.email">不是一个合法的邮箱地址</span>
<h1>表单属性状态：</h1>
valid 验证全部通过：{{myForm.myemail.$valid}}<br>
invalid 不通过：{{myForm.myemail.$invalid}}<br>
dirty 修改过：{{myForm.myemail.$dirty}}<br>
pristine 没有修改过：{{myForm.myemail.$pristine}}<br>
touched 获取过焦点且已离开：{{myForm.myemail.$touched}}<br>
untouched 没有获取过焦点且已离开：{{myForm.myemail.$untouched}}
</form>
</div>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<script>
var app = angular.module("app",[])
app.controller("control",function($scope){
$scope.name = "123"
})
</script>
初始工具、框架实例完毕。
angularjs官网实例链接：https://www.runoob.com/angularjs/angularjs-intro.html