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.
