Table of Contents<\/h3>\n\n- 1. Tools & Technologies<\/a><\/dt>\n
- 2. Project Structure<\/a><\/dt>\n
- 3. Introduction to AngularJS Components<\/a><\/dt>\n
- 4. Creating a Component<\/a><\/dt>\n
- 5. Publishing the Library<\/a><\/dt>\n
- \n
\n- 5.1 Publish with Public Access<\/a><\/dt>\n
- 5.2 Publish with Restricted Access<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 6. Consuming our Library<\/a><\/dt>\n
- 7. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. Tools & Technologies<\/h2>\nWe will build a component and package it as a library as we learn about the topic. I have chosen the below set of tools and will use the following technologies as we work in this post. Although, feel free to use a different toolset as per your preference.<\/p>\n
\n- NodeJS v6.3.0<\/a><\/li>\n
- AngularJS v1.7.4<\/a><\/li>\n
- Visual Studio Code IDE<\/a><\/li>\n
- http-server v0.11.1<\/a><\/li>\n<\/ol>\n
<\/a>2. Project Structure<\/h2>\nThere are two separate folders as you can see in the below screen grab. One will host our custom component library and the other will host a sample application which will consume the component.<\/p>\n![\"AngularJS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/ProjectFolderStructure.jpg\")
<\/a>Project Folder Structure<\/figcaption><\/figure>\n<\/a>3. Introduction to AngularJS Components<\/h2>\nComponents were introduced with version 1.5 of AngularJS. They can be thought of as directives with templates. Apart from this they allow us to structure our app as a Component based one. Unlike directives which are applied to existing DOM<\/code> elements to impart additional behavior. A component has its own HTML<\/code> called its template. Let us take a look at how we define a Component.
\nA component resides in a js<\/code> file with code that looks like below:<\/p>\nangular.\r\n module('moduleName').\r\n component('componentName', {\r\n template: 'Hello, {{$ctrl.user}}!',\r\n controller: function GreetUserController() {\r\n this.user = 'world';\r\n }\r\n });\r\n<\/pre>\nWe call the component method of an AngularJS Module and pass the name of the component as the first argument and an object called CDO<\/code> or Component Description Object, which describes the component as the second argument. With templates for a Component we can either specify it inline by setting the value of template to a HTML<\/code> snippet. Or we can also pass the URL<\/code> of the HTML<\/code> file containing the template by setting the templateUrl<\/code> property.<\/p>\n<\/a>4. Creating a Component<\/h2>\nWe will create a component which encapsulates functionality to render a user registration view. This component will also check for password strength and provide feedback to the user. We will wrap this piece into a library of its own so that we can easily share it among different applications with just a few steps.<\/p>\n
Add the following files in a folder named similar after the component, i.e. user-registration-component<\/code>.<\/p>\n\n- package.json<\/li>\n
- user-registration.component.js<\/li>\n
- user-registration.template.html<\/li>\n
- user-registration.module.js<\/li>\n
- user-registration.style.css<\/li>\n<\/ul>\n
The package.json<\/code> file is needed to list the dependencies of our component library, version and name among other things. The content of the file are as below:<\/p>\npackage.json<\/em><\/span><\/p>\n{\r\n \"name\": \"user-registration-component\",\r\n \"version\": \"1.0.0\",\r\n \"description\": \"WCG -- AngularJS Component Library\",\r\n \"scripts\": {\r\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\r\n \"start\": \"http-server .\/ -a localhost -p 8090 -c-1\"\r\n },\r\n \"keywords\": [\r\n \"AngularJS\",\r\n \"Component\",\r\n \"Library\",\r\n \"User\",\r\n \"Registration\"\r\n ],\r\n \"author\": \"Siddharth@WCG\",\r\n \"license\": \"ISC\",\r\n \"dependencies\": {\r\n \"angular\": \"^1.7.4\",\r\n \"bootstrap\": \"3.3.x\"\r\n }\r\n}\r\n<\/pre>\nNow we create a file where we declare our module. This module will host our component as we will see later. The contents of this file user-registration.module.js<\/code> is as below:<\/p>\nuser-registration.module.js<\/em><\/span><\/p>\n'use strict';\r\n\r\nangular.module('userRegistrationModule', []);\r\n<\/pre>\nMoving on now we create our Component<\/code> itself. The file, user-registration.component.js<\/code>, has our component and it looks as below:<\/p>\nuser-registration.component.js<\/em><\/span><\/p>\n'use strict';\r\n\r\nangular.module('userRegistrationModule').\r\ncomponent('userRegistration',\r\n{\r\n templateUrl: '\/node_modules\/user-registration-component\/user-registration.template.html',\r\n controller: function () {\r\n var self = this;\r\n self.pwd = \"\";\r\n self.strength = '100%';\r\n self.score = 0;\r\n self.checkUpperCase = function () {\r\n for (var c = 0; c < self.pwd.length; c++) {\r\n if (self.pwd.charCodeAt() >= 65 && self.pwd.charCodeAt() <= 91) {\r\n return 1;\r\n }\r\n }\r\n return 0;\r\n };\r\n\r\n self.checkEmpty = function () {\r\n var p = self.pwd || \"\";\r\n if (p.length > 0) {\r\n return 1;\r\n }\r\n return 0;\r\n };\r\n self.checkDigit = function () {\r\n var p = self.pwd || \"\";\r\n var digits = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];\r\n var result = 0;\r\n digits.forEach(function(item) {\r\n if (p.includes(item)) {\r\n result = 1;\r\n return;\r\n }\r\n });\r\n return (result === 0 ? 0: 1);\r\n };\r\n self.checkLength = function () {\r\n var p = self.pwd || \"\";\r\n if (p.length >= 8) {\r\n return 1;\r\n }\r\n return 0;\r\n };\r\n self.checkSpecialChar = function () {\r\n var specChars = ['*', '@', '_', '.'];\r\n var p = self.pwd || \"\";\r\n var result = 0;\r\n specChars.forEach(function(item) {\r\n if (p.includes(item)) {\r\n result = 1;\r\n return;\r\n }\r\n });\r\n return (result === 0 ? 0: 1);\r\n };\r\n self.rules = [{\r\n ruleFn: self.checkEmpty,\r\n score: 0\r\n }, {\r\n ruleFn: self.checkDigit,\r\n score: 0\r\n }, {\r\n ruleFn: self.checkUpperCase,\r\n score: 0\r\n }, {\r\n ruleFn: self.checkSpecialChar,\r\n score: 0\r\n }, {\r\n ruleFn: self.checkLength,\r\n score: 0\r\n }];\r\n\r\n self.checkStrength = function () {\r\n self.score = 0;\r\n var runningTotal = 0;\r\n self.rules.forEach(function (item) {\r\n item.score = item.ruleFn();\r\n runningTotal += item.score;\r\n self.strength = (100 - ((runningTotal \/ self.rules.length) * 100)) + '%';\r\n }, self);\r\n };\r\n }\r\n});\r\n<\/pre>\nWhat we are doing here is declaring a component with template residing in a file called user-registration.template.html<\/code> and a controller for this component. The template is described below and as for the controller it has code to check the strength of the password based on a set of rules. The rules are stored in an array of objects with each object having a function which evaluates the password and returns a score. The score is zero if the password fails the check otherwise it has a value of 1. We use the score from each function to evaluate the strength of the password and show it using a color scheme, with Red representing Weak password and Green representing a Strong password.
\nThe process is triggered on the change event of the password field in the template.<\/p>\nThe template of our component looks as below:<\/p>\n
user-registration.template.html<\/em><\/span><\/p>\n<form>\r\n <div class=\"form-group\">\r\n <label class=\"sr-only\" for=\"inputUsername\">Username<\/label>\r\n <input class=\"form-control\" type=\"text\" placeholder=\"Username\" \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-xs-12 col-sm-6 col-md-6\">\r\n <div class=\"form-group\">\r\n <input class=\"form-control\" new-password type=\"password\"\r\n ng-model=\"$ctrl.pwd\" ng-change=\"$ctrl.checkStrength()\" id=\"inputPassword\" \r\n placeholder=\"Password\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-xs-12 col-sm-6 col-md-6\">\r\n <div class=\"form-group\">\r\n <input class=\"form-control\" new-password type=\"password\"\r\n id=\"inputConfirmPassword\" placeholder=\"Confirm Password\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-xs-12 col-sm-6 col-md-6\">\r\n <label>Password Strength<\/label>\r\n <div class=\"gradient\">\r\n <div ng-style=\"{ 'width': $ctrl.strength }\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <ul>\r\n <li>Password cannot be empty<\/li>\r\n <li>Must contain atleast one Uppercase character<\/li>\r\n <li>Must contain atleast one number<\/li>\r\n <li>Must contain one of these characters * @ _ .<\/li>\r\n <li>Must be of 8 characters in length <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-xs-12 col-sm-6 col-md-6\">\r\n <div class=\"form-group\">\r\n <button type=\"button\" class=\"form-control btn btn-success\">\r\n Register\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/form>\r\n<\/pre>\n<\/a>5. Publishing the Library<\/h2>\nTo reuse our component in other applications we need to publish it. We will use npm<\/code> to achieve the same. We have a couple of options, either we publish our component as public or as a scoped package. The difference in the two being who is able to access the component. If we publish our component as public then everyone can access it. Otherwise we can go for scoped packages which limits the access to our component to our own organization. Let us look at the steps required to publish using both options. Before we begin using either option, we need to have an account with npmjs.org<\/a> albeit one requires a paid account to publish scoped packages.<\/p>\n<\/a>5.1 Publish with Public Access<\/h3>\nTo publish our component as a library with public access we need to follow the below steps
\nFirst, navigate to the directory containing the component and related artifacts that we want to publish.<\/p>\n
>cd Component Library\/user-registration-component\r\n<\/pre>\nThen we need to login with npmjs.org credentials by using the following command.<\/p>\n
>npm adduser\r\n<\/pre>\nAfterwards we run the following command<\/p>\n
>npm publish\r\n<\/pre>\nThis will publish our component library to npm and you can verify the same by visiting http:\/\/npmjs.org<\/code> and searching by the name you gave your library.
\nTo publish an updated version we need to update the version of our component in the package.json file in the directory of the component and follow the above steps again.<\/p>\n<\/a>5.2 Publish with Restricted Access<\/h3>\nTo publish our component with private access we need to perform the below steps
\nNavigate to our component library directory<\/p>\n
>cd Component Library\/user-registration-component\r\n<\/pre>\nLogin with the npmjs.org account:<\/p>\n
>npm adduser\r\n<\/pre>\nThen run the below command:<\/p>\n
>npm publish --access restricted\r\n<\/pre>\nThis should publish our component library with private access. We will take a look in the next section how to consume the same in another project.<\/p>\n
<\/a>6. Consuming our Library<\/h2>\nNow that we are done publishing our component library let us take a look at how we can consume the same in an application. All the action would now be in the folder Demo Application. The Demo Application is setup as a simple AngularJS template with just a root app module and an index.html<\/code> page. Now to pull down our published library and add it to this project we need to run the following command at the root of the project.<\/p>\n>npm install user-registration-module --save\r\n<\/pre>\nThis should pull down the latest version of our library and save it as a dependency in the package.json<\/code> file of the project. The package.json file of our Demo Application should look like below:<\/p>\n![\"AngularJS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/10\/PackageJSONFileDemo.jpg\")
<\/a>Package.json File<\/figcaption><\/figure>\nNext we need to add the following script tags to our index.html<\/code> page.<\/p>\n<script src=\"node_modules\/user-registration-component\/user-registration.module.js\"><\/script>\r\n<scriptsrc=\"node_modules\/user-registration-component\/user-registration.component.js\"><\/script>\r\n<\/pre>\nThis will pull down our library for use. We need to add the userRegistrationModule<\/code> as a dependency of the root module of our demo application in the app.module.js<\/code> file as below:<\/p>\n'use strict';\r\n\r\nangular.module('userRegistrationDemo', ['userRegistrationModule']);\r\n\r\n<\/pre>\nAll that we need to do now is add the following tag to our HTML file index.html<\/code>.<\/p>\n<user-registration><\/user-registration>\r\n<\/pre>\nThe contents of the index.html<\/code> file should look like below:<\/p>\nindex.html<\/em><\/span><\/p>\n<!doctype html>\r\n<html lang=\"en\" ng-app=\"userRegistrationDemo\">\r\n\r\n <head>\r\n <meta name=\"viewport\"\r\n content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\r\n <meta charset=\"utf-8\">\r\n <title>WCG -- Angularjs Component Library Demonstration<\/title>\r\n <link rel=\"stylesheet\" href=\"node_modules\/bootstrap\/dist\/css\/bootstrap.css\" \/>\r\n <link rel=\"stylesheet\" href=\"app.css\" \/>\r\n <script src=\"node_modules\/angular\/angular.js\"><\/script>\r\n <script src=\"app.module.js\"><\/script>\r\n <script src=\"node_modules\/user-registration-component\/user-registration.module.js\">\r\n <\/script>\r\n <script src=\"node_modules\/user-registration-component\/user-registration.component.js\">\r\n <\/script>\r\n <\/head>\r\n\r\n <body>\r\n <div class=\"container\">\r\n <h3>WCG -- Angularjs Component Library Demonstration<\/h3>\r\n <\/div>\r\n <div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <user-registration><\/user-registration>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\nTo look at the results we will run the application using the following command<\/p>\n
>npm start\r\n<\/pre>\nThen we should navigate to the following URL in the browser http:\/\/localhost:8090<\/code>. The browser would display the index page as below<\/p>\n![\"AngularJS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/10\/LandingPageWCG.jpg\")
<\/a>Landing Page<\/figcaption><\/figure>\nAs soon as you start typing in the password field you would see the strength checker provide feedback on the password. You should see something like below:<\/p>\n![\"AngularJS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/10\/LandingPagePwdStrength.jpg\")
<\/a>Landing Page Activity<\/figcaption><\/figure>\n<\/a>7. Download the Source Code<\/h2>\nThis wraps up how to create and publish an AngularJS Component Library.<\/p>\n
- \n
- 5.1 Publish with Public Access<\/a><\/dt>\n
- 5.2 Publish with Restricted Access<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- 6. Consuming our Library<\/a><\/dt>\n
- 7. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. Tools & Technologies<\/h2>\n
We will build a component and package it as a library as we learn about the topic. I have chosen the below set of tools and will use the following technologies as we work in this post. Although, feel free to use a different toolset as per your preference.<\/p>\n
- \n
- NodeJS v6.3.0<\/a><\/li>\n
- AngularJS v1.7.4<\/a><\/li>\n
- Visual Studio Code IDE<\/a><\/li>\n
- http-server v0.11.1<\/a><\/li>\n<\/ol>\n
<\/a>2. Project Structure<\/h2>\n
There are two separate folders as you can see in the below screen grab. One will host our custom component library and the other will host a sample application which will consume the component.<\/p>\n
<\/a>Project Folder Structure<\/figcaption><\/figure>\n <\/a>3. Introduction to AngularJS Components<\/h2>\n
Components were introduced with version 1.5 of AngularJS. They can be thought of as directives with templates. Apart from this they allow us to structure our app as a Component based one. Unlike directives which are applied to existing
DOM<\/code> elements to impart additional behavior. A component has its ownHTML<\/code> called its template. Let us take a look at how we define a Component.
\nA component resides in ajs<\/code> file with code that looks like below:<\/p>\nangular.\r\n module('moduleName').\r\n component('componentName', {\r\n template: 'Hello, {{$ctrl.user}}!',\r\n controller: function GreetUserController() {\r\n this.user = 'world';\r\n }\r\n });\r\n<\/pre>\nWe call the component method of an AngularJS Module and pass the name of the component as the first argument and an object called
CDO<\/code> or Component Description Object, which describes the component as the second argument. With templates for a Component we can either specify it inline by setting the value of template to aHTML<\/code> snippet. Or we can also pass theURL<\/code> of theHTML<\/code> file containing the template by setting thetemplateUrl<\/code> property.<\/p>\n<\/a>4. Creating a Component<\/h2>\n
We will create a component which encapsulates functionality to render a user registration view. This component will also check for password strength and provide feedback to the user. We will wrap this piece into a library of its own so that we can easily share it among different applications with just a few steps.<\/p>\n
Add the following files in a folder named similar after the component, i.e.
user-registration-component<\/code>.<\/p>\n- \n
- package.json<\/li>\n
- user-registration.component.js<\/li>\n
- user-registration.template.html<\/li>\n
- user-registration.module.js<\/li>\n
- user-registration.style.css<\/li>\n<\/ul>\n
The
package.json<\/code> file is needed to list the dependencies of our component library, version and name among other things. The content of the file are as below:<\/p>\npackage.json<\/em><\/span><\/p>\n
{\r\n \"name\": \"user-registration-component\",\r\n \"version\": \"1.0.0\",\r\n \"description\": \"WCG -- AngularJS Component Library\",\r\n \"scripts\": {\r\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\r\n \"start\": \"http-server .\/ -a localhost -p 8090 -c-1\"\r\n },\r\n \"keywords\": [\r\n \"AngularJS\",\r\n \"Component\",\r\n \"Library\",\r\n \"User\",\r\n \"Registration\"\r\n ],\r\n \"author\": \"Siddharth@WCG\",\r\n \"license\": \"ISC\",\r\n \"dependencies\": {\r\n \"angular\": \"^1.7.4\",\r\n \"bootstrap\": \"3.3.x\"\r\n }\r\n}\r\n<\/pre>\nNow we create a file where we declare our module. This module will host our component as we will see later. The contents of this file
user-registration.module.js<\/code> is as below:<\/p>\nuser-registration.module.js<\/em><\/span><\/p>\n
'use strict';\r\n\r\nangular.module('userRegistrationModule', []);\r\n<\/pre>\nMoving on now we create our
Component<\/code> itself. The file,user-registration.component.js<\/code>, has our component and it looks as below:<\/p>\nuser-registration.component.js<\/em><\/span><\/p>\n
'use strict';\r\n\r\nangular.module('userRegistrationModule').\r\ncomponent('userRegistration',\r\n{\r\n templateUrl: '\/node_modules\/user-registration-component\/user-registration.template.html',\r\n controller: function () {\r\n var self = this;\r\n self.pwd = \"\";\r\n self.strength = '100%';\r\n self.score = 0;\r\n self.checkUpperCase = function () {\r\n for (var c = 0; c < self.pwd.length; c++) {\r\n if (self.pwd.charCodeAt() >= 65 && self.pwd.charCodeAt() <= 91) {\r\n return 1;\r\n }\r\n }\r\n return 0;\r\n };\r\n\r\n self.checkEmpty = function () {\r\n var p = self.pwd || \"\";\r\n if (p.length > 0) {\r\n return 1;\r\n }\r\n return 0;\r\n };\r\n self.checkDigit = function () {\r\n var p = self.pwd || \"\";\r\n var digits = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];\r\n var result = 0;\r\n digits.forEach(function(item) {\r\n if (p.includes(item)) {\r\n result = 1;\r\n return;\r\n }\r\n });\r\n return (result === 0 ? 0: 1);\r\n };\r\n self.checkLength = function () {\r\n var p = self.pwd || \"\";\r\n if (p.length >= 8) {\r\n return 1;\r\n }\r\n return 0;\r\n };\r\n self.checkSpecialChar = function () {\r\n var specChars = ['*', '@', '_', '.'];\r\n var p = self.pwd || \"\";\r\n var result = 0;\r\n specChars.forEach(function(item) {\r\n if (p.includes(item)) {\r\n result = 1;\r\n return;\r\n }\r\n });\r\n return (result === 0 ? 0: 1);\r\n };\r\n self.rules = [{\r\n ruleFn: self.checkEmpty,\r\n score: 0\r\n }, {\r\n ruleFn: self.checkDigit,\r\n score: 0\r\n }, {\r\n ruleFn: self.checkUpperCase,\r\n score: 0\r\n }, {\r\n ruleFn: self.checkSpecialChar,\r\n score: 0\r\n }, {\r\n ruleFn: self.checkLength,\r\n score: 0\r\n }];\r\n\r\n self.checkStrength = function () {\r\n self.score = 0;\r\n var runningTotal = 0;\r\n self.rules.forEach(function (item) {\r\n item.score = item.ruleFn();\r\n runningTotal += item.score;\r\n self.strength = (100 - ((runningTotal \/ self.rules.length) * 100)) + '%';\r\n }, self);\r\n };\r\n }\r\n});\r\n<\/pre>\nWhat we are doing here is declaring a component with template residing in a file called
user-registration.template.html<\/code> and a controller for this component. The template is described below and as for the controller it has code to check the strength of the password based on a set of rules. The rules are stored in an array of objects with each object having a function which evaluates the password and returns a score. The score is zero if the password fails the check otherwise it has a value of 1. We use the score from each function to evaluate the strength of the password and show it using a color scheme, with Red representing Weak password and Green representing a Strong password.
\nThe process is triggered on the change event of the password field in the template.<\/p>\nThe template of our component looks as below:<\/p>\n
user-registration.template.html<\/em><\/span><\/p>\n
<form>\r\n <div class=\"form-group\">\r\n <label class=\"sr-only\" for=\"inputUsername\">Username<\/label>\r\n <input class=\"form-control\" type=\"text\" placeholder=\"Username\" \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-xs-12 col-sm-6 col-md-6\">\r\n <div class=\"form-group\">\r\n <input class=\"form-control\" new-password type=\"password\"\r\n ng-model=\"$ctrl.pwd\" ng-change=\"$ctrl.checkStrength()\" id=\"inputPassword\" \r\n placeholder=\"Password\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-xs-12 col-sm-6 col-md-6\">\r\n <div class=\"form-group\">\r\n <input class=\"form-control\" new-password type=\"password\"\r\n id=\"inputConfirmPassword\" placeholder=\"Confirm Password\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-xs-12 col-sm-6 col-md-6\">\r\n <label>Password Strength<\/label>\r\n <div class=\"gradient\">\r\n <div ng-style=\"{ 'width': $ctrl.strength }\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <ul>\r\n <li>Password cannot be empty<\/li>\r\n <li>Must contain atleast one Uppercase character<\/li>\r\n <li>Must contain atleast one number<\/li>\r\n <li>Must contain one of these characters * @ _ .<\/li>\r\n <li>Must be of 8 characters in length <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-xs-12 col-sm-6 col-md-6\">\r\n <div class=\"form-group\">\r\n <button type=\"button\" class=\"form-control btn btn-success\">\r\n Register\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/form>\r\n<\/pre>\n<\/a>5. Publishing the Library<\/h2>\n
To reuse our component in other applications we need to publish it. We will use
npm<\/code> to achieve the same. We have a couple of options, either we publish our component as public or as a scoped package. The difference in the two being who is able to access the component. If we publish our component as public then everyone can access it. Otherwise we can go for scoped packages which limits the access to our component to our own organization. Let us look at the steps required to publish using both options. Before we begin using either option, we need to have an account with npmjs.org<\/a> albeit one requires a paid account to publish scoped packages.<\/p>\n<\/a>5.1 Publish with Public Access<\/h3>\n
To publish our component as a library with public access we need to follow the below steps
\nFirst, navigate to the directory containing the component and related artifacts that we want to publish.<\/p>\n>cd Component Library\/user-registration-component\r\n<\/pre>\n
Then we need to login with npmjs.org credentials by using the following command.<\/p>\n
>npm adduser\r\n<\/pre>\n
Afterwards we run the following command<\/p>\n
>npm publish\r\n<\/pre>\n
This will publish our component library to npm and you can verify the same by visiting
http:\/\/npmjs.org<\/code> and searching by the name you gave your library.
\nTo publish an updated version we need to update the version of our component in the package.json file in the directory of the component and follow the above steps again.<\/p>\n<\/a>5.2 Publish with Restricted Access<\/h3>\n
To publish our component with private access we need to perform the below steps
\nNavigate to our component library directory<\/p>\n>cd Component Library\/user-registration-component\r\n<\/pre>\n
Login with the npmjs.org account:<\/p>\n
>npm adduser\r\n<\/pre>\n
Then run the below command:<\/p>\n
>npm publish --access restricted\r\n<\/pre>\n
This should publish our component library with private access. We will take a look in the next section how to consume the same in another project.<\/p>\n
<\/a>6. Consuming our Library<\/h2>\n
Now that we are done publishing our component library let us take a look at how we can consume the same in an application. All the action would now be in the folder Demo Application. The Demo Application is setup as a simple AngularJS template with just a root app module and an
index.html<\/code> page. Now to pull down our published library and add it to this project we need to run the following command at the root of the project.<\/p>\n>npm install user-registration-module --save\r\n<\/pre>\n
This should pull down the latest version of our library and save it as a dependency in the
package.json<\/code> file of the project. The package.json file of our Demo Application should look like below:<\/p>\n<\/a>Package.json File<\/figcaption><\/figure>\n Next we need to add the following script tags to our
index.html<\/code> page.<\/p>\n<script src=\"node_modules\/user-registration-component\/user-registration.module.js\"><\/script>\r\n<scriptsrc=\"node_modules\/user-registration-component\/user-registration.component.js\"><\/script>\r\n<\/pre>\n
This will pull down our library for use. We need to add the
userRegistrationModule<\/code> as a dependency of the root module of our demo application in theapp.module.js<\/code> file as below:<\/p>\n'use strict';\r\n\r\nangular.module('userRegistrationDemo', ['userRegistrationModule']);\r\n\r\n<\/pre>\nAll that we need to do now is add the following tag to our HTML file
index.html<\/code>.<\/p>\n<user-registration><\/user-registration>\r\n<\/pre>\n
The contents of the
index.html<\/code> file should look like below:<\/p>\nindex.html<\/em><\/span><\/p>\n
<!doctype html>\r\n<html lang=\"en\" ng-app=\"userRegistrationDemo\">\r\n\r\n <head>\r\n <meta name=\"viewport\"\r\n content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\r\n <meta charset=\"utf-8\">\r\n <title>WCG -- Angularjs Component Library Demonstration<\/title>\r\n <link rel=\"stylesheet\" href=\"node_modules\/bootstrap\/dist\/css\/bootstrap.css\" \/>\r\n <link rel=\"stylesheet\" href=\"app.css\" \/>\r\n <script src=\"node_modules\/angular\/angular.js\"><\/script>\r\n <script src=\"app.module.js\"><\/script>\r\n <script src=\"node_modules\/user-registration-component\/user-registration.module.js\">\r\n <\/script>\r\n <script src=\"node_modules\/user-registration-component\/user-registration.component.js\">\r\n <\/script>\r\n <\/head>\r\n\r\n <body>\r\n <div class=\"container\">\r\n <h3>WCG -- Angularjs Component Library Demonstration<\/h3>\r\n <\/div>\r\n <div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <user-registration><\/user-registration>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n
To look at the results we will run the application using the following command<\/p>\n
>npm start\r\n<\/pre>\n
Then we should navigate to the following URL in the browser
http:\/\/localhost:8090<\/code>. The browser would display the index page as below<\/p>\n<\/a>Landing Page<\/figcaption><\/figure>\n As soon as you start typing in the password field you would see the strength checker provide feedback on the password. You should see something like below:<\/p>\n
<\/a>Landing Page Activity<\/figcaption><\/figure>\n <\/a>7. Download the Source Code<\/h2>\n
This wraps up how to create and publish an AngularJS Component Library.<\/p>\n
- AngularJS v1.7.4<\/a><\/li>\n
- 5.2 Publish with Restricted Access<\/a><\/dt>\n<\/dl>\n<\/dd>\n