前端学习方法总结

来源：互联网发布：企业组织结构优化编辑：程序博客网时间：2024/06/05 10:00

今天做了两件事。分别是学习了bootstrap和AngularJS的API文档，直接看文档。在看之前虽然早就听说了这两门技术，但是一直没有去学习他，今天在学习之后，我发现前端的技术学习是需要一定的学习方法，其实做什么都要方法啦，只是今天在这一块有点感触。

我在学习了之后发现其实挺简单的，bootstrap和AngularJS都有一定的共性。
第一：先引入库文件，或者CDN（内容分发网络）
第二：根据他们的规则要做事
第三：根据他们提供的插件做东西

在这三步之后，你就会用这门技术了。
我虽然目前不会使用他们，但是我相信，如果项目中需要用到的话，我是可以很快上手的，因为他们都是给你规则，让你按规则办事。

总结：
1，前端技术更新太快，要学的东西太多，我们肯定不能今天出来这个就学这个，明天出来那个就学那个，我们应该做的是观察，观察这门技术的动态和基础。
2，学习基本API以及他的特性，比如bootstrap擅长在响应式/移动优先布局方面，AngularJS擅长在数据处理交互方面。
3，偶尔尝试实现官方提供的实例（这个时候你已经不会觉得他陌生了）
4，最后在项目需要的时候就深入学习应用。（当然项目结束之后你就是熟练应用了，不然为什么招聘的时候都是需要有工作经验的人呢）

附AngularJS bootstrap实例

 <!DOCTYPE html><html><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><body ng-app="myApp" ng-controller="userCtrl"><div class="container"><h3>Users</h3><table class="table table-striped">  <thead><tr>    <th>Edit</th>    <th>First Name</th>    <th>Last Name</th>  </tr></thead>  <tbody><tr ng-repeat="user in users">    <td>      <button class="btn" ng-click="editUser(user.id)">      <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit      </button>    </td>    <td>{{ user.fName }}</td>    <td>{{ user.lName }}</td>  </tr></tbody></table><hr><button class="btn btn-success" ng-click="editUser('new')">  <span class="glyphicon glyphicon-user"></span> Create New User</button><hr><h3 ng-show="edit">Create New User:</h3><h3 ng-hide="edit">Edit User:</h3><form class="form-horizontal"><div class="form-group">  <label class="col-sm-2 control-label">First Name:</label>  <div class="col-sm-10">    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">  </div></div><div class="form-group">  <label class="col-sm-2 control-label">Last Name:</label>  <div class="col-sm-10">    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">  </div></div><div class="form-group">  <label class="col-sm-2 control-label">Password:</label>  <div class="col-sm-10">    <input type="password" ng-model="passw1" placeholder="Password">  </div></div><div class="form-group">  <label class="col-sm-2 control-label">Repeat:</label>  <div class="col-sm-10">    <input type="password" ng-model="passw2" placeholder="Repeat Password">  </div></div></form><hr><button class="btn btn-success" ng-disabled="error || incomplete">  <span class="glyphicon glyphicon-save"></span> Save Changes</button></div><script src = "myUsers.js"></script></body></html>

1 0