How to run an old legacy Angular 2 App from the local?

Today, one of my teammate gave me a old legacy AngularJS app which is implemented
with Angluar 2. the Angular framework have been evolved into Angular 7. we usually start the project with angular/CLI. it is much easy and faster to spin up a project and make it running.


Since the legacy project is running under Angular 2,I try to migrate it to latest Angular 7. the structure and configuration is much different between the legacy AngularJs and new Angular.

I try different approaches with upgrade to lastest @angular/CLI, clear the cache. added all latest component in the node_modules folder.

unfortunately those tries were never succeed. After i check the project configuration setting in Package.json file. under Scripts section

"scripts": {

"build": "tsc -p src/",

"build:watch": "tsc -p src/ -w",

"serve": "lite-server -c=bs-config.json",

"prestart": "npm run build",

"start": "concurrently \"npm run build:watch\" \"npm run serve\"",

"lint": "tslint ./src/**/*.ts -t verbose"

},

we can use npm to manuplate the project, instead of ng serve and ng command

launch CMD Window and go to angular project

run npm install to get all the requirement components for the project.

run npm start to launch the project in the browser.


Now i can play around with this legacy App. it is a good way to start the migration. you can launch it and see how it work..

How to save your day with a simple command on existing anuglarJS with angular/CLI running on Node.JS?

Today, I got a chance to run an application that I download from Angular office website

when I run ng serve to launch the SPA web application. I got compile error immediately



i can fix it by run this command line in the CMD Windows

npm install -save/dev PackageName

It will really take time to fix all the missing package error. there is a much simple approach with the following line


npm install

this command will automatically re-install all the missing packages for the existing project.

How to use ng-pattern to validate the phone format in AngularJS Web application.

we can directly apply the regular expression pattern to the ng-pattern directive to validate the phone number format. however this approach will limit to mandatory field only. you will see the annoying message if you use this implementation.

<input type="text" ng-model="phoneNumber" id="input" name="phoneNumber" 

 ng-pattern="/^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/" /><br>

we can use different approach to handle this validation, we will use ng-required to validate the required validation, then we will implment a function to take care of phone format validation.



<input type="text" name="phoneNumber" ng-model="phoneNumber" ng-required="requiredCondition" ng-pattern="phoneNumberPattern" />

in the controller javascript file we will implement a validatePhoneNumber function, which will only trigger when the phone field is not blank.

$scope.validatePhoneNumber = (function () {
        var regexp = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
        return {
            test: function (value) {
                if (value.length == 0) {
                    return true;
                }
                return regexp.test(value);
            }
        };
    })();

How to solve "error TS2307: Cannot find module 'angular'" issue in development using sharpeoint page framework

In the WebPart.ts file. I use the import * as angular from angular to reference the external source that pointing to the angular CDN location.

{
  "entries": [
    {
      "entry": "./lib/webparts/itRequest/ItRequestWebPart.js",
      "manifest": "./src/webparts/itRequest/ItRequestWebPart.manifest.json",
      "outputPath": "./dist/it-Request.bundle.js"
    }
  ],
  "externals": {
    "@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",
    "@microsoft/sp-client-preview": "node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js",
    "@microsoft/sp-lodash-subset": "node_modules/@microsoft/sp-lodash-subset/dist/sp-lodash-subset.js",
    "office-ui-fabric-react": "node_modules/office-ui-fabric-react/dist/office-ui-fabric-react.js",
    "react": "node_modules/react/dist/react.min.js",
    "react-dom": "node_modules/react-dom/dist/react-dom.min.js",
    "react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js",
      "angular": {
            "path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js",
            "globalName": "angular"
          }
  },
  "localizedResources": {
    "itRequestStrings": "webparts/itRequest/loc/{locale}.js"
  }
}

however the syntax error already is shown indicate the type script can not find the angular module.



after i launch the app with Gulp Serve. the same erorr was encounter on the application launch



the root cause of this issue is that the project did not contain the angular TypeScript typing. since it is from the external source. we just need to install the angular TypeScript typing to fix the issue.

here is the steps to add the type script typing to the project.

1. use npm install tsd to install the tsd command (if the tsd is not installed.)

2. run tsd install angular --save to install the angular TypeScript typing. and angularjs will be found under typing folder.







 for more information, please visit the following link. it really save my day...

Use existing JavaScript libraries in SharePoint Framework client-side web parts

How to conditional display the text of button in AngularJS

If you are a C# developer, you will easily understand the syntax. it is same with ? : Operator
 
?: Operator

<button type="submit" ng-click="MyButtonClick()"><span>{{isConditionMeet ? 'True Condition Text' : 'False Condition Text'}}</span></button>

How to setup a Paging Control for the grid in AngularJS

we can treat the table as the grid in AngularJS. however, we will encounter the performance issue when the number of rows exeed 100 or more.

it is best to use pagination from AngularJs to load only specifc number of records to improve the performan

we can put the following code below the table content. the page control will be properly rendered and ready to use.

 <div style="float:right">
                <pagination boundary-links="true" max-size="10" items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" ng-change="pageChanged()"></pagination>
            </div>


you only have to define the values for the following attribute.

total-items: the total number of records that meets the criteria and will be loaded.

ng-model: Page number,which is the number displayed in the paging control. we will use this to determine the rows will be loaded into UI.

max-size: the total number of page number will be shown in the paging control. in my case there is 10, it will show 1 to 10 in the page control. when user click on the advance button, it will show the next 10, like 10 to 20

ng-change: the javascript function to handle the event on user clicks on the page number in the paging control. the table content will be changed and the specifc number of rows will be loaded


in my snippet of code like this

$scope.pageChanged = function () {
      //console.log('Page changed to: ' + $scope.currentPage);
      myService.getMyTableContentByPageNumber($scope);
  };

How to define the tab order in AngularJS ng-repeat Table?

in my application. there is a table to host multiple textbox in each row.

since the user want to use the tab key to put the cursor focus on the next textbox, after they complete a textbox.

we can use the tabIndex properties in the textbox, set tabIndex value by using $index in the ng-repeat.

 <tr ng-repeat="orderDetail in MyOrder.orderDetailsList track by $index">
                           
                            <td><input type="text" tabindex="6+{{$index}}" ng-model="orderDetail.quantities" ng-blur="getQuantityTotal()"></td>
                            <td><input type="text" tabindex="6+{{$index}}+1"  class="shipItemInput" ng-model="orderDetail.shipItemName" ng-keyup="shipItemAutoComp('shipItemInput',$index)"><input type="text" ng-model="orderDetail.shipItemID" ng-show="false"   /></td>
                       
                            <td><input type="text"  tabindex="6+{{$index}}+3"  ng-model="orderDetail.weight" ng-blur="getWeightTotal()"></td>
                        </tr>

how to refresh a table/grid in the AngularJS implementation with ngDialog Popup

when i try to  add a new row to the grid with ngDialog modal popup,  the grid never refresh to show the new row after the ngDialog is closed. I debug it with console.log to view the data in Chrome.

the data array did update with new record. However the grid did not show the new record.

the trick is we must use the submit action in the form to trigger the anglarJS ng-repeat bindding update.


before the modification, the data array had been update with ng-click.

ngDialog.open({
            template: '\
                    <h2 class="underline">Add New Customer</h2>\
                     <p class="red">{{addCustomerError}}</p>\
                    <table>\
                        <tr>\
                            <td>\
                                CustomerName:<br />\
                                <input type="text" ng-model="customerFormData.dealerIdName" />\
                            </td></tr>\
                            <tr><td>\
                                street:<br />\
                                <input type="text" ng-model="customerFormData.mailAddress1" />\
                            </td></tr>\
                            <tr><td>\
                                City:<br />\
                                <input type="text" ng-model="customerFormData.mailCity" />\
                                 </td></tr>\
                            <tr><td>\
                                Province:<br />\
                                <input type="text" ng-model="customerFormData.mailProvince" />\
                            </td></tr>\
                              <tr><td>\
                                Postal Code:<br />\
                                <input type="text" ng-model="customerFormData.mailPostCode" />\
                            </td></tr>\
                            <tr><td>\
                                Phone:<br />\
                                <input type="text" ng-model="customerFormData.phone" />\
                            </td></tr>\
                    </table> <br />\
                <div class="ngdialog-buttons">\
                    <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog(0)">Cancel</button>\
                    <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="saveCustomer()" >Confirm</button>\
            </div>',
            className: 'ngdialog-theme-plain custom-width',
            scope: $scope,
            plain: true
        })

Finally the table can be refreshed with the following code. and highlight the change in Bold.

we had to use the form with ng-submit action to update the data array and trigger the date binding on the ng-repeat table.

ngDialog.open({
            template: '\
                     <form ng-submit="saveCustomer()">\
                    <h2 class="underline">Add New Customer</h2>\
                     <p class="red">{{addCustomerError}}</p>\
                    <table>\
                        <tr>\
                            <td>\
                                CustomerName:<br />\
                                <input type="text" ng-model="customerFormData.dealerIdName" />\
                            </td></tr>\
                            <tr><td>\
                                street:<br />\
                                <input type="text" ng-model="customerFormData.mailAddress1" />\
                            </td></tr>\
                            <tr><td>\
                                City:<br />\
                                <input type="text" ng-model="customerFormData.mailCity" />\
                                 </td></tr>\
                            <tr><td>\
                                Province:<br />\
                                <input type="text" ng-model="customerFormData.mailProvince" />\
                            </td></tr>\
                              <tr><td>\
                                Postal Code:<br />\
                                <input type="text" ng-model="customerFormData.mailPostCode" />\
                            </td></tr>\
                            <tr><td>\
                                Phone:<br />\
                                <input type="text" ng-model="customerFormData.phone" />\
                            </td></tr>\
                    </table> <br />\
                <div class="ngdialog-buttons">\
                    <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog(0)">Cancel</button>\
                    <button type="submit" class="ngdialog-button ngdialog-button-primary" >Confirm</button>\
            </div></form>',
            className: 'ngdialog-theme-plain custom-width',
            scope: $scope,
            plain: true

        })