- #Angularjs code examples update#
- #Angularjs code examples full#
- #Angularjs code examples code#
- #Angularjs code examples free#
One of the most capable, extensible and popular frameworks is AngularJS, and one of the most useful components of the AngularJS framework is something called a directive.
#Angularjs code examples full#
I am sure it could be extended or made in a better manner.With the rapid growth of JavaScript as a full stack language, more and more applications are utilizing frameworks that enable the web browser to handle more of the UI processing such as data binding, managing data views, transforming data and many other services. The idea behind this article is to demonstrate the power of AngularJS directives.
#Angularjs code examples free#
Please feel free to suggest or comment as I have been doing AngularJS from quite sometime but do not consider myself as an expert or something link that.
#Angularjs code examples code#
![angularjs code examples angularjs code examples](https://redcrackle.com/sites/default/files/images/20141108023223.png)
As a result of score changing due to options chosen by the user, the scorecard changes and the watch from “iscorecard” directive updates it template appropriately. Parent controller scope as a bridge for directives inter-communication: The parent controller scope acts as a bridge for communication between two directives, iquestion and iscorecard.Accessing the parent scope: One could access the parent scope properties and methods from within directive using code such as $scope.$parent.Take a look at the code to find more about the isolate scope. Isolating Scope: The directives have got their own scope which, in turn, defines custom properties that could be used to retrieve the data from HTML page.It also makes it extensible based on the fact that new attribute could be defined to associate additional functionality. The reason why the directives, iquestion and iscorecard, have been restricted to “Element” is that these are the key directives of this app and are not intended to decorate existing elements. Other possible ways in which directives can be used are attributes (A), comment (M) and class (C). Note that ‘E’ is being used in the directives code.
![angularjs code examples angularjs code examples](https://s3.amazonaws.com/fp.strategy11.com/images/knowledgebase/angularjs-examples-input-shortcode.png)
#Angularjs code examples update#
The key point to note is that the templating makes the whole thing reusable as an update to the template would update all of the pages using that template. Templating: The custom directives make use of following two templates.Key directives concept demonstrated with quiz appįollowing are key concepts related with directives that got demonstrated in creating the custom directives, iquestion and iscorecard. The right answer is prefixed by “_”.įollowing directive can be used to display the score card: In the text below, the question and answer options is separated by “::” and answer options are separated by “ ”. This attribute is used to gather the question and answer options along with right answer. In the following directive, there is an attribute called as “text”. This is how questions & answers will be written using custom directive, iquestion. iscorecard: This directive display scores for the quiz.iquestion: This directive helps define the questions in the simplest form.To achieve the above objective, following directives were created: I was able to create the two sets of questions in flat 10 minutes. The objective behind the quiz app is to enable the quiz creators create quick quiz apps by focusing on questions and answers rather than dealing with nitty gritty of web development for creating each app. Introduction to Quiz App & Related Custom Directives Key directives concept demonstrated with quiz app.Introduction to Quiz App & Related Custom Directives.