We Keep Coding

AngularJS assertion failure on SharePoint React Script Editor Webpart SPFx Webpart

I have a Microsoft SharePoint 2013 application which consists of AngularJS customized application aspx pages. The application works perfectly fine on SP13.
But now the requirement is to move to SPO Modern Teams site. To prevent a lot of SPFx re-development and time lag, I have used a React Script Editor Webpart SPFx Webpart where I can simply copy the HTML and references that are already developed and working script files.
I am facing an intermittent issue where only on the first page load, it gives the below error:
Error: [ng:areq] Argument 'FormCtrl' is not a function, got undefined
When I refresh again, everything loads properly and works fine. I am unable to troubleshoot and figure out the issue trying multiple combinations and seek for help with this community.
Below is how the application is built on SharePoint 2013 (which works fine) but intermittently when moved to SPO React Script Editor Webpart:
SharePoint aspx page in Pages library.
Content Editor WebPart with reference to text file containing HTML.
Reference to jQuery, AngularJS, etc. and custom script files in HTML.
Custom Script files as:
An App File with definition to the app that is declared in the HTML as ng-app
var app = angular.module('myApp', ['ngRoute']);
A Constants file that is used in the controller
app.constant('config', {
ListName: 'This is the name of the list'
});
A service file. All REST API calls and common methods are defined here and called from controller
app.service('DataAccessLayer', ['$http', '$q', function ($http, $q) {
this.method1(){
....
}
this.method2(){
....
}
});
The main controller file which has the functionality written:
app.controller('FormCtrl', function ($scope, config, DataAccessLayer) {});

How to include AngularJS in a page

I'm making a NodeJS application and I want to use AngularJS for my client side scripting. I downloaded AngularJS via NPM and now I'm trying to get it implemented within my page, for some reason my requite isn’t working. Can anyone help me include the AngularJS file?
Post page.
extends layout
block content
script(src="/javascripts/postCtrl.js")
// Page Content
.container(ng-app='postModule', ng-controller='postCtrl')
form(method='post')
button(ng-click='test()') Click to test Button
Post script
var angular = require('angular');
var app = angular.module('postModule', []);
app.controller('postCtrl', function ($scope, $sce) {
$scope.test = function(){
alert("Working");
};
});

client side javascript does not support require. Before you put postCtrl.js into your front-end page, you should use babel or webpack to compile it into client side executable javascript

Throwing cannot get error after enabling html5Mode in AngularJS

I am using UI-Router for routes/states in my app and URLs were having "#" so to remove this , I used $locationProvider like -
function configState($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
Added ngRoute in module dependency and added <base href="/" > in my index.html.
Problem -
If I am using it as a normal app like in same tab and navigates to other state, it works BUT whenever I pasted the URL in another tab and hit enter its throwing Cannot GET /app_views/contacts URL is like - http://localhost:9000/app_views/contacts
Though with hash in URL it works in both way manner.

You are likely getting this error because your server is not configured correctly. In other words when you manually enter /app_views/contacts it will make a request to the server for that page. For this to work properly you need configure your server to route all traffic to your index.html page in order for Angular to properly take over and display the correct view.
Here is a related post Reloading the page gives wrong GET request with AngularJS HTML5 mode

AngularJS application multiple pages

I have an angularjs SPA application with an index.html page as the main template and the rest of the views are loaded as subviews in an ng-view tag. I'm using a twitter bootstrap template for the site so the template has a login page thats different from the rest of the pages. Is there a way to have multiple main template pages, one for the login page and one for everything else? I've been trying to figure out how to specify a different page in the route provider but I haven't been able to figure out how to specify a page rather than a partial view as the templateURL or if thats even possible.
I'm new to angularjs so i'm not sure what the best way to handle this situation.
Thanks

You are on the right track with RouteProvider
angular.module('mymodule', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider.
when('/index.html/page1/', {templateUrl : './templates/template1.html'}).
when('/index.html/page2/', {templateUrl : './templates/template2.html'}).
otherwise({redirectTo : '/index.html/page1/'});
});

You would have to do this using ng-include. Your main view should look like
<body ng-app>
<div id='topNav' ng-include='templateUrl' ng-controller='topNavController'></div>
<div id='left' ng-include='templateUrl' ng-controller='leftNavController'></div>
<div ng-view>
</body>
The templateUrl can be from server or preloaded onto the client using <script> tag.
The javascript would look like.
function topNavController($scope, $route, $location) {
//Check using $route or $location if login view is loaded
// if yes $scope.templateUrl='loginTopNavTemplateUrl'
//else $scope.templateUrl='mainNavTemplateUrl'
}
Check documentation for ng-include, $route and $location to see how how these elements work.

Angular Routing & the ng-view

How does angular know to make a request for the template view that contains 'ng-view' element?
If I navigate in my application say directly to
http://localhost/Categories/List/accessories
. A request is still made to '/ or the index template' as this contains the 'ng-view' element needed to render all the views.
When I navigate from the index to /Categories/List/accessories no request is made for the index again.
Below is my basic routing which has been copied in part from the Angular MVC "CookBook" example on GitHub
angular.module('myApp', ['myApp.ctrl.list'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/Home/Splash',
});
$routeProvider.when('/Categories/List/:slug', {
templateUrl: '/Categories/List',
controller: 'listCtrl',
});
$routeProvider.otherwise({
redirectTo: '/'
});
}]);

With your routing configuration, I believe your example url is missing a pound sign (#), so it should look like:
http://localhost/#/Categories/List/accessories
The part after the # sign is the path intended to be resolved by AngularJS (ie. the routing configuration you have defined)
When you enter the above URL into the address bar of the browser, the browser automatically looks for index.html on localhost. Most browsers, if not all, are set to look for index.html when only the domain name is present in the URL.
What about the part after the # sign? You might ask. The path after the # sign does not get sent to the server, by definition, and thus the browser could care less of what that part is consisted of.
In the second scenario you mentioned, AngularJS does not request for index.html because it's been cached the first time it was loaded and that cached copy is used.

Is your locationProvider configured for HTML5?
$locationProvider.html5Mode(true);
See Using HTML5 pushstate on angular.js