We have this AngularJS SP application (smart-mirror) in electron browser, which has user createable extensions.
the extensions are small snippets of html that use angular directives
and use controllers and services.
to install an extension, one has to edit the main page and insert the script tags for the controller and service functions and a <div ng-include= ...> for the snippet of HTML
hardcoded this single page app works great.
but I want to add the capability to this app (opensource) to dynamically load those elements somehow...
adding the tags to the dom works, BUT are not processed correctly.
the HTML is processed before the scripts (from the inserted tags) are run, and when the ng-include inserts the HTML snippet, then controllers are not defined yet...
the body (with the extensions in hard-coded positions commented out)
<body ng-controller="MirrorCtrl" ng-cloak>
<div class="top">
<div class="top-left">
<!-- <div ng-include="'plugins/datetime/index.html'"></div>
<div ng-include="'plugins/calendar/index.html'"></div> -->
</div>
<div class="top-right">
<!-- <div ng-include="'plugins/weather/index.html'"></div>
<div ng-include="'plugins/traffic/index.html'"></div>
<div ng-include="'plugins/stock/index.html'"></div>
<div ng-include="'plugins/tvshows/index.html'"></div>
<div ng-include="'plugins/ha-display/index.html'"></div> -->
</div>
</div>
...
...
<script src="filename.service"/>
<script src= filename.controller"/>
</body>
the calendar extension html (inserted into specific div area of the page)
<ul ng-controller="Calendar" class="calendar fade" ng-show="focus == 'default'" ng-class="config.calendar.showCalendarNames ? 'show-calendar-names' : ''">
<li class="event" ng-repeat="event in calendar" ng-class="(calendar[$index - 1].label != event.label) ? 'day-marker' : ''">
<div class="event-details">
<span class="day">
<span ng-bind="event.startName"></span>
<span ng-if="event.startName != event.endName"> - <span ng-bind="event.endName"></span></span>
</span>
<div class="details calendar-name" ng-bind="event.calendarName"></div>
<span class="summary" ng-bind="event.SUMMARY"></span>
<div class="details" ng-if="event.start.format('LT') != event.end.format('LT')">
<span ng-if="event.startName != event.endName"><span ng-bind="event.start.format('M/D')"></span> <span ng-bind="event.start.format('LT')"></span> - <span ng-bind="event.end.format('M/D')"></span> <span ng-bind="event.end.format('LT')"></span></span>
<span ng-if="event.startName == event.endName"><span ng-bind="event.start.format('LT')"></span> - <span ng-bind="event.end.format('LT')"></span></span>
</div>
<div class="details" ng-if="event.start.format('LT') == event.end.format('LT')">All day</div>
</div>
</li>
</ul>
the calendar extension controller (used by the html)
function Calendar($scope, $http, $interval, CalendarService) {
var getCalendar = function(){
CalendarService.getCalendarEvents().then(function () {
$scope.calendar = CalendarService.getFutureEvents();
}, function (error) {
console.log(error);
});
}
getCalendar();
$interval(getCalendar, config.calendar.refreshInterval * 60000 || 1800000)
}
console.log("registering calendar controller")
angular.module('SmartMirror')
.controller('Calendar', Calendar);
the calendar extension service (used by the controller, shortened for this discussion)
(function () {
'use strict';
function CalendarService($window, $http, $q) {
...
...
return service;
}
console.log("registering calendar service")
angular.module('SmartMirror')
.factory('CalendarService', CalendarService);
} ());
so a user wanting to add an extension would have to create these files,
and edit the main page HTML and insert them
<div ng-include src="filename.html"></div>
in the right place and then add the
<script src="filename.service" >
and
<script src="filename.controller">
in the right place and order, service needs to be done before the controller,
as controller uses service.
anyhow, it's easy to add code to locate all the extensions and dynamically insert elements into the dom in their respective places... but...
in the hard coded, the scripts are added after the html in the body
so, I added a new script (processed when the page is loaded), which locates and inserts all the elements to support the extensions in the right places..
and then the script ends.... (last one in the hard-coded HTML) and the HTML directives are processed and boom, the dynamically added scripts have not been loaded or processed, so the controllers are not found...
I CAN create a temp HTML file with all this info in it and load THAT instead of dealing with the dynamic loading, but I think its better to resolve this
I have tried creating my own angular directive and compiling that in, but get stuck in a loop
<divinc src="filename.service"></divinc>
the inserted div is correct, as a child of the divinc directive
angular.module('SmartMirror')
.directive("divincl", ["$compile" ,function($compile){
return {
priority: 100,
terminal: true,
compile: function(scope, element, attrs) {
var html = "<div ng-include=\"" + element['incl']+ "\" onload='function(){console.log(\'html loaded\')}'></div>"
var templateGoesHere = angular.element(document.getElementById(element['id']));
templateGoesHere.html(html);
//document.body.innerHTML='';
var v= $compile(templateGoesHere);
//scope.$apply();
return function linkFn(scope) {
v(scope) // Link compiled element to scope
}
}
}
}]);
advice on how to solve this problem.. Thanks
In order to make an angularjs 1.7 application load dynamically extensions, there are 2 ways:
either use "nested angularjs applications", which is clearly an advanced use of angularjs and will require you to communicate between 2 angularjs applications, to use $scope.$apply to tell the other app to update etc..
either don't load them dynamically in the frontend, but in your backend when generating the html page which contains the application. Try to list all the extensions from the start.
I recommend you to forget the use of ng-include too, and the fact of trying to add <script></script> inside a directive of your application.
First, you need to re-understand how an angularjs application is started.
When you load your main application, you have a script in which angular.module, angular.directive, angular.value, angular.config, angular.run ... calls are made. This is the declaration step
If you declare a module MyApp and that in your html you have a DOM element with ng-app="MyApp", angularjs will automatically run angular.bootstrap() on this DOM element in order to start MyApp. The execution of the application starts here. You cannot declare anything anymore in the module MyApp.
Secondly, I think that <script></script> code inside templates is sanitized and removed by angular. Plus, even if you execute the code, since the declaration step has finished, you are not supposed to create new directives or register new services, it won't work.
A good way is that when you load your plugin, you:
Load the script of the plugin from the start, it must declare a new module like MyPlugin1.
In the directive which will contain the plugin, put the code of the link I sent you, which makes possible to insert a sub-application. In the end you will have a <div ng-app="MyPlugin1"></div> inside your directive's template
Then call angular.bootstrap on that node, which will make possible to start the sub application.
If you do this, you can run the sub application, but you didn't pass it parameters. In order to pass it parameters, you can put the code of the module MyPlugin1 inside a function, in order to have an application factory. Then use app.value('param1', parameter1) to initialize the app.
For example:
function declarePlugin1(myParam1, myParam2) {
var app = angular.module('MyPlugin1', []);
// app.directive();
app.value('myParam1', myParam1);
app.value('myParam2', myParam2);
}
And inside the directive call declarePlugin1("test", 42);, which will declare the application MyPlugin1 with the initialized values, and then angular.bootstrap to tell angularjs to start this application.
You can pass callbacks too, in order to communicate between the 2 applications.
Related
I followed the guidelines that provided by google to integrate new google sign in. I created HTML using Code generator that provided by Google.
Here I have attached the complete code
<svelte:head>
<title>Home</title>
<meta name="description" content="Svelte demo app" />
</svelte:head>
<section>
<div class="h-screen">
<div
id="g_id_onload"
data-client_id="534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com"
data-context="use"
data-ux_mode="redirect"
data-login_uri="http://localhost:5173/auth/callback"
/>
<div class="bg-red-300 h-80">
<div
class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="medium"
data-logo_alignment="left"
data-width="180"
/>
</div>
</div>
</section>
It works fine for the first time render of the page.
When we are refreshing the page using Command+R or by clicking reload icon from the browser, Sign in button disappears.
A hard reload is server-side rendered when using SvelteKit. The code is probably incompatible with that or the execution order is wrong.
Check the console for errors and move code that has to run on the client to onMount. You can also turn off server-side rendering for specific pages using the ssr page option as a last resort.
For now I created component using Javascript, Here I have added the answer.
I declared google as global variable in app.d.ts
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
const google: any;
namespace App {
}
}
export {};
I created a svelte file to create a svelte component for sign in button
let canvas: any; //Created a variable to optain a reference to rendered div element
<div class="g_id_signin"
bind:this={canvas}/>
In onMount
onMount(async () => {
google.accounts.id.initialize({
client_id: "534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com",
ux_mode: "redirect",
context: "use",
login_uri: "http://localhost:5173/auth/callback"
});
google.accounts.id.renderButton(canvas, {
width: '220',
theme: 'outline',
size: 'large',
type: 'standard',
text: 'signin_with',
shape: 'rectangular',
logo_alignment: 'left',
});
});
This code will work in initial render, Hard reload (Command+shift+R) and Reload (Command+R)
I have a projet setup similar to the Polymer shop-app. To reduce thr code base in the app itself, I splitted the hole main page layout into an separete element project. The project has an element Layout which loads 7 of its Dependencys lazy:
_pageLoaded: function (shouldResetLayout) {
this._ensureLazyLoaded();
...
}
_ensureLazyLoaded: function () {
if (!this.loadComplete) {
Polymer.RenderStatus.afterNextRender(this, function () {
this.importHref(this.resolveUrl('lazy-resources.html'), function () {
this.loadComplete = true;
}, null, true);
});
}
},
Basically the same logic as the Shop-app exmaple._pageLoaded is an observer of the two-way data bound page property of my Shop-app.
In my Shop-app itself, I include the layout element like so:
<link rel="import" href="../bower_components/lc-app-layout/lc-app-layout.html">
<lc-app-layout categories="[[categories]]" page="[[page]]" category-name="{{categoryName}}">
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">
<!-- home view -->
<shop-home name="home" categories="[[categories]]"></shop-home>
<!-- list view of items in a category -->
<shop-list name="list" route="[[subroute]]" offline="[[offline]]" query-Params="[[queryParams]]"></shop-list>
<!-- detail view of one item -->
<shop-detail name="detail" route="[[subroute]]" offline="[[offline]]"></shop-detail>
</iron-pages>
</lc-app-layout>
And also have some lazy ressources in the app itself, which are loaded the same way as in the layout.
Now when I want to build everythin, I need to add the lazy-resurces of the layout element as an fragment to the Polymer.json so that the analyser will find the it's dependencys:
"fragments": [
"src/view/list/shop-list.html",
"src/view/detail/shop-detail.html",
"src/lazy-resources.html",
"bower_components/lc-app-layout/lazy-resources.html"
No when I serve this build, the page doesn't load most of the times. It shows error like:
Cannot read property '_makeReady' of undefined
Polymer is not a function
Cannot read property 'isDescendant' of undefined
When I throttle the network speed, chances are higher that everythin will load up. So I assume there is some timing issue in the asynchronous ImportHref or something like that. Or am I just missusing the fragments to tell the analyzer to scan my laczy resources of the layout element?
I'm using Polymer-CLI 0.18.0. Runnig the app with polymer serve does work as intended.
Solved the problem by moving the lazy loading from layout element to the lazy-ressource of the Shop-app.
I am learning AngularJS at the moment and I am a little confused about the MVC separation of code throughout the DOM/file structure when using AngularJS.
I learn best when I work on a project. Right now I am working on a simple counter that adds a whole number when a button is pushed. I only have one way working and I am thinking of a better way to do this.
Right now I have this working in the code I am working on from AngularJS documentation itself.
I am probably crazy thinking that this cannot be the best way to do this. From my understanding ng-click is a directive that triggers a specific scope of code within the controller.
Why is Increment code inline within the DOM? As a MVC, should the code be organized to not be all over the place, such as in the main controller.js? I have tried to put the increment += function in a counter object, but could not get it to work, see jsFiddle.
<div ng-controller="MyCtrl">
<button ng-click="char">Charged</button>
<span>Total: {{ count }}</span>
</div>
I get that Apps view information based on expressions, filters, and directives. Directives bind to HTML to change behavior of the HTML. Clicks (with Directive selectors) controllers triggers AngularJS to run functions to update data without the entire page being reloaded.
So the Model is the whole setup.
The View is the expressions, filters, and directives.
Controller is the JS file of code that has objects and functions needed for the HTML Directives.
The example of the documentation has inline controller in the directive ng-click within the button tag…
Does anyone have any advice? Thank you.:)
There is a correct way of doing that in angular via a controller:
http://jsfiddle.net/zhxztysy/1/
Your fiddle was like this
<div ng-controller="MyCtrl">
<button ng-click="char">Charged</button>
<span>Total: {{ count }}</span>
</div>
function MyCtrl($scope) {
$scope.count = 0;
$scope.count = Function (char) {
$scope.count += char;
};}
Changed to this
<div ng-controller="MyCtrl">
<button ng-click="charge(5)">Charged</button>
<span>Total: {{ count }}</span>
</div>
function MyCtrl($scope) {
$scope.count = 0;
$scope.charge = function (char) {
$scope.count += char;
};
}
Can also extended like this
<div ng-controller="MyCtrl">
<button ng-click="charge()">Charged</button>
<span>Total: {{ count }}</span>
</div>
function MyCtrl($scope) {
$scope.count = 0;
$scope.chargingCount = 5;
$scope.charge = function () {
$scope.count += $scope.chargingCount;
};
}
I edited your jsfiddle to work. You have made a syntax error (bound $scope.count to a function and tried to add numbers to it later on)
I'm developing app for Windows Phone 8.1 using WinJS and I used Visual Studio's template for pivot application. My Applications queries external API and displays results in PivotItem. Since there are three very similar queries that reurn same type of data, I'd like to reuse one code for all the sections in Pivot. The PivotItem page consist basically only of ListView with items received from API. My section page javascript looks like this:
var ControlConstructor = WinJS.UI.Pages.define("/pages/bookmarks/sectionPage.html", {
ready: function(element, options) {
//Here I call API based on received option and render the page
}
}
WinJS.Namespace.define("bookmarksApps_SectionControls", {
SectionControl: ControlConstructor
});
My page declaring the Pivot looks like this:
<div class="bookmarks" data-win-control="WinJS.UI.Pivot" data-win-res="{ winControl: {'title': 'BookmarksTitle'} }">
<div class="section1 section" data-win-control="WinJS.UI.PivotItem" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'BookmarksNew'} }">
<div class="sectioncontrol" id="section1contenthost" data-win-control="bookmarksApps_SectionControls.SectionControl" data-win-options="{'section': 'new'}"></div>
</div>
<div class="section2 section" data-win-control="WinJS.UI.PivotItem" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'BookmarksAll'} }">
<div class="sectioncontrol" id="section2contenthost" data-win-control="bookmarksApps_SectionControls.SectionControl" data-win-options="{'section': 'all'}"></div>
</div>
<div class="section3 section" data-win-control="WinJS.UI.PivotItem" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'BookmarksHistory'} }">
<div class="sectioncontrol" id="section3contenthost" data-win-control="bookmarksApps_SectionControls.SectionControl" data-win-options="{'section': 'history'}"></div>
</div>
</div>
Now, when I open the app,pivot page correctly loads and displays first section with data. But when I swipe the different section, new data is loaded (so the ready function is called, but nothing is displayed (page is blank, only PivotItems' headers are visible). But if I swipe back to section1, it contains data, that I want to display in section2.
Is it possible to reuse my SectionPage.html and SectionPage.js in different PivotItems, preferably without too much of boilerplate code?
You need to create custom HTML control which will host these pages, custom control can accept uri as data-win-options, then inside your control you can have updateLayout() which will render the page and append to parentElement.
Sample code in update layout method:
var options = {} //Page options
if (!this._isLoaded) {
this._isLoaded = true;
WinJS.UI.Pages.render(this.uri, this._pageElement, options);
}
I found source of my problem. In page /pages/bookmarks/sectionPage.html I had <div> with an id meant for holding my ListVIew. And I was getting win control for listview using document.getElementById("listViewId").winControl. This is wrong, because then I had three divs with same id (each for every section), so getElementById was always returning same list (the one on the first section).
So I changed getting of the wincontrol to
var discussionList = document.querySelector("#" + contentHost + " .disucssionsListView").winControl;
where contentHost depends on data-win-options received from main page and everything works as expected.
I'm new to Angular so be gentle with me! I'm looking at rendering subsection DOM elements based on an AJAX response, how do I go about implementing the below in Angular?
On page load a list of section headers is returned from the controller:
Clicking on any of these sections (red) would show a subsection list (blue), each of these blue headers can be clicked to show another list (black), bearing in mind I only want to show the immediate-child sections for each section/subsection/sub-subsection header click:
I've got the template code I want to use for each of these, but how do I go about bringing these templates together?
So far from looking around I get the impression I should be creating a directive for the section, sub-section and sub-sub-section (yes?), can I then bind a template to the result of an HTTP Service call? I.e expanding as the detail screenshot above:
<div area="PSED">
Personal, Social and Emotional Development
<div aspect="MH">
Making Relationships
<div goal="BLAH">
<input type="checkbox"> Blah, Blah, Blah
</div>
</div>
</div>
I was hoping to reduce page load time by returning as little data as necessary and populating sections as-required by the user.
I hope this is a reasonable question as I couldn't find anything demonstrating what I need (perhaps my ignorance of ng was causing me to omit an important keyword from my searches).
Thanks in advance for any advice provided.
Andy
If I understand the question, you are trying to dynamically add nodes to a tree-like structure after an ajax call. You can use a combination of ng-include and a recursive template to do this. Here's a rough example that doesn't include the logic for collapsing nodes but I think it gets the idea across.
View:
<script type="text/ng-template" id="tree_item_renderer.html">
<span ng-click="add(data)">{{data.name}}</span>
<ul>
<li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'">
</li>
</ul>
</script>
<ul ng-app="Application" ng-controller="TreeController">
<li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>
Controller:
angular.module("myApp", []).
controller("TreeController", function($scope, $http) {
$scope.delete = function(data) {
data.nodes = [];
};
$scope.add = function(data) {
var post = data.nodes.length + 1;
var newName = data.name + '-' + post;
//make your call here and set your child node data
//$http.get('...').then(function(res){
// data.nodes.push({name: newName,nodes: res.data});
//});
//test data
data.nodes.push({name: newName,nodes: []});
};
$scope.tree = [{name: "Top Node", nodes: []}];
});
Working jsFiddle: http://jsfiddle.net/nfreeze/c9mrhxf2/1/