Create a Tabbed Browser Using Node-Webkit and AngularJS

' '' }; })

What we are doing here is creating a reusable template that can be created dynamically using Angular. The trustSrc() method on the iframe src attribute will be created in our controller.

Explaining how directives work in Angular is beyond the scope of this article. If you’re in need of a refresher, check out: A Practical Guide to AngularJS Directives.

Some Supporting Services

Angular uses services for code organization, reusability, communicating with APIs and the sharing of logic between its controllers. We need to make three for ourselves: one (prompt) to use prompts to get URL inputs and the other two (GUI and Window) to communicate with NW.js’ GUI and Window APIs so that we can create custom minimize, full-screen and close buttons:

.factory("prompt", function ($window, $q) {
  function prompt(message, defaultValue) {
    var defer = $q.defer();
    var response = $window.prompt(message, defaultValue);
    if (response === null) {
      defer.reject();
    } else {
      defer.resolve(response);
    }
    return (defer.promise);
  }
  return (prompt);
})
.factory('GUI', function () {
  return require('nw.gui');
})
.factory('Window', function (GUI) {
  return GUI.Window.get();
});

The Controller at Last

The controller, just as the name goes, will control the flow of data in the application. We will inject the following dependencies: $scope, $sce (a service that provides Strict Contextual Escaping services to AngularJS), prompt, Window (the two services we created above).

.controller('main', function ($scope, $sce, prompt, Window) {
  //implementation here
})

We will first create a method to trust a resource URL (which we already implemented in the directive):

$scope.trustSrc = function (src) {
  return $sce.trustAsResourceUrl(src);
}

It would be awesome to make SitePoint our home page, so we will create an array of tabs for our directive to loop through with SitePoint’s URL as the first value.

$scope.tabs = [
  {
    url: 'https://www.sitepoint.com/'
  }
];

We can now launch new tabs using the prompt service to get the URL from the user. We set the active attribute to true, so that the new tab receives focus:

$scope.newTab = function () {
  prompt("Please enter a url", "http://www.sitepoint.com")
  .then(function (url) {
    var tab = {url: url, active:true}
    $scope.tabs.push(tab);
  },
  function () {
    alert("Error opening site!");
  });
};

Closing tabs involves using the Array#splice function to remove values from the tabs’ array as seen below:

$scope.closeTab = function (index) {
  $scope.tabs.splice(index, 1);
};

The rest of the controller is used to add behavior to the controls which are for minimizing, enabling/disabling fullscreen and closing the window:

$scope.minimize = function () {
  Window.minimize();
};
$scope.toggleKioskMode = function () {
  Window.toggleKioskMode();
};
$scope.close = function () {
  Window.close();
};

We have yet to add these controls to the markup even though we have added the implementation. So let us do that now (in app/views/index.ejs):

<span><span><span><div</span> class<span>="controls"</span>></span>
</span>   <span><span><span><i</span> class<span>="fa fa-plus"</span> tooltip-placement<span>="bottom"</span>
</span></span><span>   <span>uib-tooltip<span>="New tab"</span> ng-click<span>="newTab()"</span>></span><span><span></i</span>></span>
</span>   <span><span><span><i</span> class<span>="fa fa-minus"</span> ng-click<span>="minimize()"</span>></span><span><span></i</span>></span>
</span>   <span><span><span><i</span> class<span>="fa fa-square-o"</span> ng-click<span>="toggleKioskMode()"</span>></span><span><span></i</span>></span>
</span>   <span><span><span><i</span> class<span>="fa fa-times"</span> ng-click<span>="close()"</span>></span><span><span></i</span>></span>
</span><span><span><span><div</span>></span>
</span>

And that’s it! You can now launch the browser using the grunt command from the terminal.

Building for Platforms

If you cast your mind back to the start of the article, I mentioned that it is possible to deploy a NW.js app on all major operating systems. There are extensive instructions on how to do this on the NW.js project page, or you could use generator-wean’s pre-configured build task (which I will now demonstrate).

Running grunt build from the project root will build the app for the OS it was built on, whereas grunt build:all will build for all platforms. The command grunt build:{platform} (eg grunt build:mac ) will build for a specific OS. Possible options are win, osx, linux32, linux64. For more information, please refer to generator-wean readme.

By way of an example, if you are on a 64-bit Linux system and run:

.factory("prompt", function ($window, $q) {
  function prompt(message, defaultValue) {
    var defer = $q.defer();
    var response = $window.prompt(message, defaultValue);
    if (response === null) {
      defer.reject();
    } else {
      defer.resolve(response);
    }
    return (defer.promise);
  }
  return (prompt);
})
.factory('GUI', function () {
  return require('nw.gui');
})
.factory('Window', function (GUI) {
  return GUI.Window.get();
});

This will generate a builds/test/linux64 directory which contains an executable, corresponding to the name of your project.

Conclusion

With that I hope to have demonstrated not just the power of NW.js, but the power of web technologies in making native applications. We did not just learn how to make a native browser, but we also saw NW.js, Yeoman and other tools in play. Don’t forget, the source code for this tutorial is on GitHub — I encourage you to download it and experiment.

Are you using NW.js? Do you think that it can mount a serious challenge to native applications? I’d love to hear your thoughts in the comments below.

Frequently Asked Questions (FAQs) about Node-Webkit and AngularJS

What is the main difference between Node.js and AngularJS?

Node.js and AngularJS are both JavaScript-based technologies, but they serve different purposes. Node.js is a runtime environment that allows JavaScript to be run on the server side, while AngularJS is a client-side framework used for building dynamic web applications. Node.js is ideal for creating scalable and efficient server-side applications, while AngularJS excels at creating single-page applications with rich, interactive features.

How can I use Node.js with AngularJS?

Node.js and AngularJS can be used together to create a full-stack JavaScript application. Node.js can be used to create the server-side part of the application, handling tasks such as database operations, file I/O, and network communication. AngularJS, on the other hand, can be used to create the client-side part of the application, providing a dynamic and interactive user interface.

What is Node-Webkit and how does it relate to AngularJS?

Node-Webkit is a tool that allows you to create desktop applications using web technologies like HTML, CSS, and JavaScript. It combines the Node.js runtime with the Chromium web browser, allowing you to use Node.js modules directly in the browser. This means you can use AngularJS to create the user interface for your Node-Webkit application, just like you would for a regular web application.

Can I build desktop applications using JavaScript and Node-Webkit?

Yes, you can build desktop applications using JavaScript and Node-Webkit. Node-Webkit allows you to use web technologies to create desktop applications, meaning you can use JavaScript, along with HTML and CSS, to create the user interface for your application. You can also use Node.js modules directly in the browser, giving you access to powerful features like file I/O and network communication.

What are the advantages of using Node.js over AngularJS, and vice versa?

The main advantage of Node.js over AngularJS is its ability to handle server-side tasks, such as database operations, file I/O, and network communication. This makes it ideal for creating scalable and efficient server-side applications. On the other hand, the main advantage of AngularJS over Node.js is its ability to create dynamic and interactive user interfaces, making it ideal for creating single-page applications.

How can I get started with Node-Webkit?

To get started with Node-Webkit, you first need to download and install it. Once you’ve done that, you can create a new project by creating a package.json file and a main HTML file. The package.json file is used to specify the main HTML file and other settings for your application, while the main HTML file is where you write your application’s user interface.

Can I use other JavaScript frameworks with Node-Webkit?

Yes, you can use other JavaScript frameworks with Node-Webkit. Node-Webkit allows you to use any JavaScript framework that can run in the browser, including frameworks like React, Vue.js, and Ember.js. This gives you a lot of flexibility when it comes to choosing the right tools for your application.

What are some common use cases for Node-Webkit?

Node-Webkit is commonly used to create desktop applications that need to use web technologies. This includes applications like text editors, music players, and photo editors. It’s also used to create applications that need to interact with the file system or the network, thanks to its integration with Node.js.

How does Node-Webkit compare to other tools for creating desktop applications?

Node-Webkit compares favorably to other tools for creating desktop applications. Its main advantage is its ability to use web technologies, which makes it easier for web developers to transition to desktop application development. It also integrates with Node.js, giving it access to powerful features like file I/O and network communication.

What are some challenges I might face when using Node-Webkit and AngularJS together?

One challenge you might face when using Node-Webkit and AngularJS together is managing the communication between the server-side and client-side parts of your application. This can be especially tricky if you’re not familiar with full-stack JavaScript development. However, with careful planning and good use of Node.js and AngularJS’s features, you can overcome this challenge.

The above is the detailed content of Create a Tabbed Browser Using Node-Webkit and AngularJS. For more information, please follow other related articles on the PHP Chinese website!