The Basic Elements of AngularJS for constructing rich and engaging single page applications, AngularJS makes it easier to write cleaner and more efficient code (SPAs).
Basic directives: Directives are just DOM element identifiers that inform the compiler to attach a certain event or behavior to that element.
Angular comes with a collection of directives pre-installed. Some of these are discussed farther down.
- ng-app: Initiates an AngularJS application
- ng-infit: Initializes application data
- ng-model: Defines the model to be used in AngularJS
MVC architecture: The Model View Controller (MVC) pattern is a software design paradigm for creating Web applications. It consists of the following three sections:
Model – the lowest level, which is in charge of data maintenance.
The view is in charge of displaying all or part of the data to the user.
The Model and View interactions are controlled by the Controller.
View: The term “view” refers to how you present facts in a specific way. It could be triggered by a choice made by the controller. HTML is used to generate the view in an AngularJS application. The term “view” refers to what users see. Because Angular provides two-way data binding, it binds data from the model inside your controller and updates it immediately if the model changes from the controller. To accomplish this, no new code is required.
The view’s controller is responsible for bringing together the view’s model and handling input from the view’s consumer. The ng-controller directive in AngularJS resolves the controller by name.
Building your own directives: AngularJS allows you to create custom directives, which are nothing more than HTML extensions. They’re created with the directive function and simply replace the element for which they’re used. AngularJS uses its compile() function to discover the matching elements and processes them once; it then processes the elements using the link() method of the custom directive based on the scope. It allows you to create custom directives for the items listed below.
Element directives: When a matching element is found, it activates. When a matching attribute is found, the attribute is activated
CSS: When a matching CSS style is found, it activates
Comment: When a matching comment is found, it activates.