32u590du4e60.docx - Week7 Client side javascript...

Week7 Client side javascript framework
1. Single page applications
 Allow full functionality to be in one page.
 Html, css, js loaded on the first page load
 Ajax technic is used to dynamically interact with the server.
 Retrieves data from server side
 User interface control moved from server side to client side
2. Angular Js features
 Bi-directional data binding, from view to model and from model to view.
 Html as template languages for views
 UI is based on and controlled by browser at client side
3. Components of Angular Js application
 ng-model: binds the value of Angular js application data to HTML input
controls
 ng-app: defines and link angular js application to html
 ng-bind: binds the Angular js application data to html tags
Week 8 :Validation, login, and usability features
Validation can reduce security issues, minimize. Eg, code injection
In models:
Annotation:
[Required(ErrorMessage = “”)]
[Range(0,100,ErrorMessage=””)]
[DataType(DataType.Date)]
[StringLength(255,MinimumLength = 8)]
[EmailAddress]
[RegularExpression(@"^\$?\d+(\.(\d{2}))?$")]
In views:
Through @Html.ValidationMessageFor(model=> model.Name,’’,)
A customized Error Message can also be given in the view , through overridden
methods eg. 三个参数，第一个朗目达，第二个 error message 第三个新 html 属性
还有 validation summary
Usability Features ：
Tooltip, using title attributes.
tabIndex and user input , using tabindex attributes
relevant hot keys, using accesskey attributes.
Login and register :
Annotate the Contact Action in the HomeController with "[Authorize]" annotation.
Now you will need to be logged in to view the contact information.
Week 9: web optimizations:
Q: Describe 5 ways of optimizations in web application development and use
examples to illustrate your answers.
A: Mainly: 1. Reduce http connect
2. Reduce file size
3. Caching
4. perceived improvement
Detailed:
1. combine images, making JS asynchronous and reduce size of files.
2. Image optimization: use css to replace small icons to reduce http request. Use

image compression to choose the correct type corresponding to img size
3. Minify Css and JavaScript: remove white space and break line. Use min file.